sessionStorage、localStorage、cookie

https://juejin.cn/post/6879767341941882887

 

sessionSorage的使用

存储对象的方法有很多，sessionStorage属性算是其中一个，用的较多。sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

• 保存数据

//1.存储json对象，通过JSON.stringify()将对象转换为文本格式
sessionStorage.setItem('currentRowData', JSON.stringify(row))
//2、数据
sessionStorage.setItem("key", "value"); 
复制代码

• 获取数据

//1、读取时，通过JSON.parse()将文本转换回对象。
sessionStorage.getItem('currentRowData'JSON.parse(rowData));
//2、数据，通过key获取值
sessionStorage.getItem("key");
复制代码

sessionStorage、localStorage、cookie区别

• 首先来说cookie吧，保存在浏览器上，如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
• WebStorage包括sessionStorage和localStorage，这两个是保存在服务器上的。
• 存储大小区别：单个cookie保存的数据不能超过4kb，localStorage和sessionStorage的存储数据大小一般都是：5MB
• 对于sessionStorage和localStorage，localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失，sessionStorage关闭浏览器后数据就会消失。

cookie、localStorage和sessionStorage适用场景

cookie

• 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。

• 保存上次登录的时间等信息。

• 保存上次查看的页面

• 浏览计数

sessionStorage和localStorage（session机制）

• 网上商城中的购物车

• 保存用户登录信息

• 将某些数据放入session中，供同一用户的不同页面使用

• 防止用户非法登录