背景：工作中用到了 sessionStorage 存储数据，总结下在使用过程中遇到的问题和解决办法。分享给你们，走过路过，觉得对你有用就顺手点个赞。

一、localStorage、sessionStorage、cookie 的区别

1、我们先来看三者是干什么的？

localStorage、sessionStorage、cookie 用于存储数据于浏览器。缓解内存压力。

2、三者之间的区别？

名称	存储大小	失效时间
localStorage	5M	永久存储，除非用户手动清除浏览器缓存
sessionStorage	5M	关闭窗口或标签页前
cookie	4k	根据设置的过期时间

二、session、SessionID、token 傻傻分不清？

1、session(会话)

session，Access Manager 会话服务创建会话数据结构用于存储有关用户会话的信息，并使用 Cookie 存储一个标识会话的令牌。当用户登录并成功验证时，给用户分配一个会话，即会话数据结构，该会话结构最少存储有关用户会话的以下信息：

最大空闲时间

在会话到期之前，最多没有活动的分钟数，用户必须重新验证。

最大会话时间

会话到期之前的最大分钟数（活动或无活动），用户必须重新验证。

最大缓存时间

客户端请求 Access Manager 去刷新缓存的会话信息之前的最大分钟数。

2、SessionID（会话令牌）

SessionID 是由会话服务为新的会话数据结构生成的一个加密的，唯一的字符串，用于标示特定的会话实例。如果会话令牌是受保护的资源，则应用程序可访问会话和其中包含的所有用户信息。在会话管理中，会话令牌在 cookie 中携带，cookie 是由 Web 服务器生成的信息数据包，并将其传递给 Web 浏览器。Web 服务器为用户生成 cookie 的事实不能保证用户可以访问受保护的资源。cookie 只需指向数据存储中的用户信息，可以从中派生访问决策。

3、token

token 和 SessionID 一样，都是会话令牌，用于保存在客户端，传递给服务端验证用户身份的。两者的区别是：

sessionid一般存储在cookie中，请求发送（同源情况下），随着cookie一起发送到服务器端
token一般需要手动添加在header中，拦截请求，添加到header中，再发送给服务器端

三、JSON.parse 报错问题解决

localStorage、sessionStorage 都提供了 getItem、setItem、removeItem 方法方便我们新增、获取、移除数据。 localStorage、sessionStorage 保存字符串类型数据，想要保存对象类型数据时，使用 JSON.stringify 转化为字符串再保存。用法：（sessionStorage 用法相同）

const o = {
  a:'sub_name',
  b:{
    label: '前端数据存储'
  }
}

localStorage.setItem('webdata', JSON.stringify(o))
// 浏览器的值是字符串类型： {"a":"sub_name","b":{"label":"前端数据存储"}}
localStorage.getItem('webdata')
// 输出：'{"a":"sub_name","b":{"label":"前端数据存储"}}'
localStorage.removeItem('webdata')
// 执行结果：已移除 webdata

结语

面试考察点：浏览器存储方法，各自特性和区别，应用场景及解决问题的思路。你学会了吗？

day05 localStorage、sessionStorage、cookie 知多少？