localStorage、sessionStorage、cook

localStorage、sessionStorage、cookie的区别及其各自的用法

HTML4 的本地存储

浏览器的缓存机制提供了可以将用户数据存储在客户端上的的方式，可以利用 cookie、session 等跟服务端进行数据交互。

cookie 和 session

cookie 和 session 都是用来跟踪浏览器用户身份的会话方式。

区别

1. 保持状态：

   cookie 保存在浏览器端，session 保存在服务器端；

2. 使用方式：

   （1）cookie 机制：如果不在浏览器中设置过期时间，cookie 被保存在内存中，生命周期随浏览器的关闭而结束，这种 cookie 简称会话 cookie，如果在浏览器中设置了 cookie 的过期时间，cookie 被保存在硬盘中，关闭浏览器后，cookie 数据仍然存在，直到过期时间才消失。cookie 是服务器发给客户端的特殊信息，cookie 是以文本的方式保存在客户端，每次请求时都带上它；

   （2）session 机制：当服务器收到请求需要创建 session 对象时，首先会检查客户端请求中是否包含 sessionid。如果有 sessionid ，服务器将根据该 id 返回对应 session 对象。如果客户端请求中没有 sessionid，服务器会创建新的 session 对象，并把sessionid在本次响应中返回客户端。通常使用 cookie 方式存储 sessionid 到客户端，在交互中浏览器按照规则将 sessionid 发送给服务器；

3. 存储内容：

   cookie 只能保存字符串类型，以文本的方式；session 通过类似与 Hashtable 的数据结构来保存，能支持任何类型的对象（session 中可以包含多个对象）；

4. 存储容量：

   单个 cookie 保存的数据不能超过 4kb；session 的大小没有限制；

5. 应用场景：

   cookie：

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

   （2）保存上次登录的时间等信息；

   （3）保存上次查看到页面

   （4）浏览次数

   session：

   （1）网上商城中的购物车

   （2）保存用户登录信息

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

   （4）防止用户非法登录

6. 缺点：

   cookie：

   （1）大小受限

   （2）用户可以操作禁用 cookie ，使功能受限

   （3）安全性较低

   （4）有些状态不可能保存在客户端

   （5）每次访问都要传送 cookie 给服务器，浪费带宽

   （6）cookie 数据有路径（path）的概念，可以限制 cookie 只属于某个路径下

   session：

   （1）session 保存的东西越多，就越占服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大

   （2）依赖于 cookie ，如果禁用 cookie，则要使用 url 重写，不安全

   （3）创建 session 变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用 session 变量将会导致代码不可读而且不好维护

HTML5 的本地存储

主要有两个重要内容：Web Storage 与本地数据库，Web Storage 存储机制就是对 HTML4 中的 cookie 存储机制的一个改善。由于 cookie 存储机制有很多缺点，HTML5 不再使用它，转而使用改良后的 Web Storage 存储机制。

Web Storage 又分为两种，sessionStorage 和 localStorage，这两者的主要区别在于：sessionStorage 为临时存储，而 localStorage 为永久保存（除非手动删除）。Web Storage 的主要目标就是，一是提供一种在 cookie 之外存储会话数据的路径，二是提供一种存储大量可以跨会话存在的数据的机制。

localStorage 和 sessionStorage

1. 生命周期：

   （1）localStorage：生命周期是永久的，关闭页面或者浏览器之后 localStorage 中的数据也不会消失，除非主动删除数据，否则数据永远不会消失

   （2）sessionStorage：仅在当下会话有效，sessionStorage 引入了一个“浏览器窗口”的概念，是在同源窗口中始终存在的数据，只要这个浏览器窗口关闭了，就会被销毁，同时独立的打开同一个窗口或者同一个页面也是不一样的

2. 存储大小：

   一般都是 5MB

3. 存储位置:

   都保存在客户端中，不与服务器进行交互通信

4. 存储内容类型：

   都是只能存储字符串类型，对于复杂的对象可以使用 json 对象的 stringify 和 parse 来处理

5. 获取方式:

   window.localStorage；window.sessionStorage

6. 应用场景：

   localStorage：用于长期登录（判断用户是否登录），适合长期保存在本地的数据

   sessionStorage：敏感账号一次性登录

7. 方法：

   setItem(key,value)----用于保存数据，以键值对的方式存储数据信息；

   getItem(key)----获取数据，将键值传入，即可获取到对应的 value 值；

   removeItem(key)----删除单个数据，根据键值移除对应的数据信息；

   clear()----删除所有的数据信息；

   key(index)----获取某个索引的 key