web 本地存储 (localStorage、sessionStorage)
对浏览器来说,使用 Web Storage 存储键值比照存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage
1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载
2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据仍然会一直存在
常用方法
1.保存数据到本地
const info = { name: 'Lee', age: 20, id: '001' };sessionStorage.setItem('key', JSON.stringify(info));localStorage.setItem('key', JSON.stringify(info));
2.从本地存储获取数据
var data1 = JSON.parse(sessionStorage.getItem('key')); var data2 = JSON.parse(localStorage.getItem('key'));
3.本地存储中删除某个保存的数据
sessionStorage.removeItem('key');localStorage.removeItem('key');
4.删除所有保存的数据
sessionStorage.clear();localStorage.clear();
5.监听本地存储的变化
console.log('key', e.key); console.log('oldValue', e.oldValue); console.log('newValue', e.newValue); console.log('url', e.url); })
Storage 发生变化(添加、升级、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其余页面改变 Storage
浏览器查看本地存储的方法
进入开发者工具
选择 Application
在左侧 Storage 下 查看 Local Storage 和 Session Storage
注意Local Storage 和 Session Storage只能存储字符串,比方存储了一个boolean型,值为true,取出来会是字符串”true”
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web 本地存储 (localStorage、sessionStorage)
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » web 本地存储 (localStorage、sessionStorage)