window.localStorage.setItem的使用
最近接触的一个小项目中频繁看到一个新的面孔:
changeTheme () {dispatch({ type: 'app/switchTheme' })},changeOpenKeys (openKeys) {window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })},}
虽然字面上理解了window.localStorage.setItem的意思,但是对其用法不甚理解。所以找了一些文档,将自己的理解整理下来:
针对上面的这个部分,这段代码可以缓存当前页面的停留的子页面和展开的数据,当切换出去该页面再回来的时候,展示的仍然是离开时的页面和数据。
HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存,有大小限制。
localStorage是持久化的本地保存,只要你找不到其所在地没有主动删掉,就会一直存在。就像一些缓存,都把APP删了还有。
sessionStorage是会话级别的本地保存,比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失,在不同浏览器窗口不会共享的,即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。
window.localStorage.setItem(key,value);//设置指定key的数据(JSON格式)window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据window.localStorage.clear();//清空所有的存储数据window.sessionStorage.setItem(key,value);window.sessionStorage.getItem(key);window.sessionStorage.removeItem(key);window.sessionStorage.clear();
localStorage其他注意事项
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串
示例
if(!window.localStorage){alert("浏览器支持localstorage");
}else{var storage=window.localStorage;var data={name:'taytay',sex:'woman',hobby:'program'};var d=JSON.stringify(data);storage.setItem("data",d);console.log(storage.data);
}
读取之后要将JSON字符串转换成为JSON对象,使用JSON.parse()方法
var data={name:'taytay',sex:'woman',hobby:'program'
};
var d=JSON.stringify(data);
window.localStorage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
打印出来是Object对象
另外还有一点要注意的是,其他类型读取出来也要进行转换…
参考链接: https://www.cnblogs.com/st-leslie/p/5617130.html
https://www.cnblogs.com/wdlhao/p/4494624.html
window.localStorage.setItem的使用相关推荐
- window.localStorage.setItem总结
window.localStorage.setItem(key,value);//设置指定key的数据(JSON格式)window.localStorage.getItem(key);//获取指定ke ...
- window.localStorage.setItem的理解与使用
最近接触的一个小项目中频繁看到一个新的面孔: changeTheme () {dispatch({ type: 'app/switchTheme' })},changeOpenKeys (openKe ...
- python使用localStorage.setItem()写入本地存储转义符的问题
做UI自动化,某些场景我们需要使用JavaScript的localStorage.setItem()写入token的值. 格式为localStorage.setItem(key,value),valu ...
- 页面的通讯( localStorage.setItem)
页面的通讯就是:在同一个项目中,两个页面在同时开启的情况下,页面A做操作,页面B也跟着做操作,实现页面同步 这里我们就使用localStorage.setItem来实现两个页面之件的通讯,正常的loc ...
- vue localStorage.setItem
1> sessionStorage是什么对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大, 它包含两种:localStorage(长期存储): ...
- localStorage.setItem()前后端分离情况下使用
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除. localStorage 属性是只读的. 前后端分离情况下,可以将后端返回的数据保存到localStor ...
- localStorage.setItem()与localStorage.getItem()的使用
1.什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cooki ...
- localStorage.setItem()使用
什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的 ...
- localStorage setItem getItem
localStorage.setItem("key",value) 将value保存到key字段 localStorage.getItem('key') 获取key字段 缺点 ...
最新文章
- 内核ioread,iowrite volatie 的正确使用
- 安装华为T2000软件,无法初始化MS SQL 2000问题解决办法
- shell脚本判断进程是否运行
- 巨蟒python全栈开发flask11项目开始3
- 【HANA系列】SAP HANA XS创建XSJOB后台执行
- Sqli-labs less 40
- 第四周Java学习总结
- 翻译文章第六章4-7
- C语言/C++中strcpy_s函数
- 在ipad任意界面都可以写字_新 iPad 只是爱奇艺播放器?这 34 款实用 App 帮你秒增生产力...
- 现金流贴现法估值模型
- 【深度学习】常用数据集标注软件使用指南
- oracle 配置不能保存,Oracle Net Manager保存网络配置提示无效条目Error writing entr
- 大数据平台分布式搭建-Hadoop集群配置
- 崇寿小学计算机编程,宁波第一!崇寿这个学校的孩子们棒棒哒
- c#直接横向打印LocalReport
- 64位Ubuntu 14.04下安装broadcom无线网卡驱动
- 青蛙过河游戏c语言,C语言动态规划(7)___过河(Vijos P1002)
- “暴力美学1”——DFS深度优先搜索
- 【转发重要论文】顶中区N200: 一个中文视觉词汇识别特有的脑电反应