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();

应该还有更深的理解。待续。

-----------------------------------------------------------continue--------------------------------------------------------------------------------

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
————————————————
版权声明：本文为CSDN博主「taylorzun」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/taylorzun/article/details/81112392

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字段缺点 ...

window.localStorage.setItem的理解与使用

window.localStorage.setItem的理解与使用相关推荐

最新文章

热门文章