js本地存储

本地存储

js 本地存储主要有以下几种方式

• cookie
• session
• localStorage
• sessionStorage
• indexedDB(待补充)

cookie

cookie，小型文本文件，指某些网站为了辨别用户信息而存储在用户浏览器（即客户端）上的数据。是为了解决 http 无状态导致的问题（问题：多次请求无法区分是否是来自同一用户）。
它存储的文本数据一般不超过 4kb，由一个名称 name、一个值 value 和其它几个可选属性，如：有效期、安全性、使用范围。
由于需要区分用户，所以在每次请求中都会携带这个 cookie，其保存的信息容易被窃取，所以安全性比较低。改进方法就是使用 https 对其加密。
cookie 是有过期时间的，HTTP1.0 使用的是 Expires，HTTP1.1 使用的是 Cache-Control（优先级高于前者）。
Expires 设置的过期时间是一个绝对时间，而 Cache-Control 使用 Max-Age 设置的时间是一个相对时间，相对于现在。
cookie 可以跨域吗？
cookie的"同源策略"：仅仅关注 域名，也就是说 cookie 支持跨域访问，只需要设置 domain 属性为 一个域名，
比如设置为".xxx.com"，那么以 ".xxx.com"为后缀的一切域名都能够访问该 cookie。

session

http 请求如何携带 session id？ session 存储了哪些内容？
session 代表着服务端和客户端一次会话的过程，session 存储量用户的信息以及配置信息。当用户在用一个网站上不同的页面进行跳转的时候，存储在 session 里面的数据不会丢失，而是一直保存在此次会话中。当客户端关闭会话（关闭浏览器）或者 session 超时失效的时候会话结束。
session 它是存储在服务端中的数据。当客户端向服务端发起一次请求，服务端首先会检查此次请求里面是否有一个唯一表示 session id，如果有则说明此前已经给当前用户创建过 session，服务端就通过这个 session id 把这个 session 拿出来使用（如果找不到会新建）。如果没有，那么服务端则会为此用户创建一个 session，并且生成一个唯一标识 session id，并在此次服务端响应过程中返回给客户端保存
保存这个 session id 的形式可以采用 cookie 的方式
cookie 与 session 的区别

1. 存取数据的类型不同
   cookie 只能存储 ASCII 字符串，session 可以存储任意类型的数据，包括变量

2. 存储的地点不同
   cookie 存储在客户端，session 存储在服务端

3. 安全性 / 隐私策略不同
   由于 cookie 存储在客户端，对客户端是可见的，这导致cookie可能被获取、复制以及修改。session 存储在服务端，对客户端是透明的，信息不易泄露出去，比较安全

4. 服务器压力不同
   由于 cookie 存储在客户端，session 存储在服务端，所以 session 对服务器的压力大，每一个用户都需要创建一个 session，这样就会生成许多 session

5. 有效期不同
   cookie 可以设置长时间保持，比如默认登录功能，session 一般时间比较短，客户端关闭或者 session 超时时都会失效

6. 存储大小不同
   单个 cookie 保存的数据不能超过 4 k，session 可以存储的数据远远高于 cookie

7. 跨域支持上的不同
   cookie的"同源策略"：仅仅关注 域名，也就是说 cookie 支持跨域访问，只需要设置 domain 属性为 一个域名，
   比如设置为".xxx.com"，那么以 ".xxx.com"为后缀的一切域名都能够访问该 cookie。
   session 不支持跨域

localStorage / sessionStorage

这两个无法设置过期时间，只能存储字符串类型的数据
localStorage
• 生命周期：永久的将数据存储在本地浏览器中，除非手动删除，否则数据永不过期。
• 共享：存储的信息在同一域中是共享的。
• 数据大小：一般能存储的数据大小为 5M。
• 跨域：否，手同源策略的影响
• 数据类型：字符串类型的数据，如果不是字符串需要先转成字符串，通常使用 JSON来处理
sessionStorage
与 localStorage 比较，唯一不同的就是 生命周期，sessionStorage 关闭页面数据就会被删除了。
应用场景
• 标记用户与跟踪用户的行为的情况，推荐使用 cookie
• 适合长期存储在本地的数据，推荐使用 localStorage
• 敏感账号一次行登录，推荐使用 sessionStorage
• 存储大量数据的情况、在线文档保存编辑历史的情况，推荐使用 indexedDB

webStorage如何设置有效期

我想到的就是当我们第一次存储数据的时候保存当前的一个时间戳，记为 first，当我们后续在进入网站的时候拿到当前时间戳，记为 next ，如果 next - first 小于我们设置的有效期，则说明没有过期，如果大于或等于则表明已经过期，这时候手动删除这些存储在 webStorage 的数据
其他方法：

自定义办法设置 localStorage 过期时间
第三方库