window.localStorage.setItem总结

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

HTML5种的web storage包含两种存储方式：localStorage和sessionStorage，这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。

localStorage

是持久化的本地保存，只要你找不到其所在地没有主动删掉，就会一直存在。就像一些缓存，都把APP删了还有。

sessionStorage

是会话级别的本地保存，比如一个页面关闭的时候该页面设置的sessionStorage数据会自动消失，在不同浏览器窗口不会共享的，即使是同一个浏览器的同一个页面。根Java里面的会话有点类似的。
使用localstorage.setItem(name,value)存储JSON对象时会发现浏览器存储的内容为[object,object]，并不是我们想要的内容，这是因为我们在存储的时候没有进行类型转换，因此我们在使用localstorage.setItem()进行对象存储之前需要使用JSON.stringify(object)进行类型转换，转换成JSON字符串后进行存储就会是我们想要的样子了{‘xxx’:‘11111’}

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储sessionStorage 方法
sessionStorage 方法针对一个 session 进行数据存储。在关闭窗口或标签页之后，数据会被删除。

sessionStorage特别适用于单页面应用（angular），可以方便在各个界面之间传值。

方法如下：
 string sessionStorage.key(int index) ：返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。

 string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。

 void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

 void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。

 void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。

可以看到sessionStorage存储的数据只能是字符串，对于常用的对象和数组是存储不了的，因此我们可以通过JSON对象提供的parse和stringify将其他数据类型

转化成字符串，再存储到storage中就可以了。

代码如下：

存入数据：

使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
this.queryParams={name:'lisi',id:'222'};
sessionStorage.setItem('queryParam',JSON.stringify(this.queryParams))
读取数据

读取之后要将JSON字符串转换成为JSON对象

this.queryParams = JSON.parse(sessionStorage.getItem('queryParam'));
数组的操作同样是用上述方法。
题外话：

localStorage的用法和sessionStorage是一样的，只不过localStorage的存储是永久性的，需要手动删除。

参考资料

window.localStorage.setItem的理解与使用_taylorzun的博客-CSDN博客_window.localstorage.setitemhttps://blog.csdn.net/zmkyf1993/article/details/78065712?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.base&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.base