web 本地存储 (localStorage、sessionStorage)

作者 : 开心源码 本文共934个字,预计阅读时间需要3分钟 发布时间: 2022-05-13 共130人阅读

对浏览器来说,使用 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)

发表回复