本地存储特性

window.sessionStorage

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据：

sessionStorage.clear()

<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>// 关闭浏览器失效console.log(localStorage.getItem('username'));var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function () {// 当我们点击了之后，就可以把表单里面的值存储起来var val = ipt.value;sessionStorage.setItem('uname', val);sessionStorage.setItem('pwd', val);});get.addEventListener('click', function () {// 当我们点击了之后，就可以把表单里面的值获取过来console.log(sessionStorage.getItem('uname'));});remove.addEventListener('click', function () {// sessionStorage.removeItem('uname');});del.addEventListener('click', function () {// 当我们点击了之后，清除所有的sessionStorage.clear();});</script>
</body>

window.localStorage

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

删除所有数据：

localStorage.clear()

<body><input type="text"><button class="set">存储数据</button><button class="get">获取数据</button><button class="remove">删除数据</button><button class="del">清空所有数据</button><script>// 永久生效var ipt = document.querySelector('input');var set = document.querySelector('.set');var get = document.querySelector('.get');var remove = document.querySelector('.remove');var del = document.querySelector('.del');set.addEventListener('click', function () {var val = ipt.value;localStorage.setItem('username', val);})get.addEventListener('click', function () {console.log(localStorage.getItem('username'));})remove.addEventListener('click', function () {localStorage.removeItem('username');})del.addEventListener('click', function () {localStorage.clear();})</script>
</body>

案例：记住用户名

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

JavaScript 本地存储、sessionStorage和localStorage相关推荐

JavaScript本地存储实践（html5的localStorage和ie的userData）的实例页面
本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Op ...
详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录浏览器本地存储浏览器本地存储浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
JavaScript本地存储
sessionStorage 同一个窗口本地存储信息先设置数据 sessionStorage.setItem('username','张三'); sessionStorage.setItem('ag ...
Javascript本地存储的方式有哪些？区别及应用场景？
# 一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage indexedDB # cookie Cookie,类型为 ...
JavaScript——本地存储用户名存储案例
一.本地存储 1.1 本地存储特性 1.数据存储在用户浏览器中 2.设置.读取方便.甚至页面刷新不丢失数据 3.容量大,sessionStorage约5M.localStorage约2 ...
JavaScript本地存储详解
目录 1.作用 2.特点 3.localStorage使用 4.sessionStorage使用 5. localStorage和sessionStorage的区别 6.本地存储使用过程中的注意事项 ...
性能：15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
JavaScript 本地存储
文章目录 1.本地存储简介 2.window.sessionStorage 3.window.localStorage 4.记住用户名 1.本地存储简介随着互联网的快速发展,基于网页的应用越来越普遍 ...

JavaScript 本地存储、sessionStorage和localStorage

文章目录

本地存储特性

window.sessionStorage

window.localStorage

案例：记住用户名

JavaScript 本地存储、sessionStorage和localStorage相关推荐

最新文章

热门文章