JS详解Cookie、LocalStorage和SessionStorage

基本概念

Cookie

Cookie顾名思义，非常小，大小在4KB左右。主要用途是保存登录信息，比如登录一个网站市场，是可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨识用户身份的数据来实现的。

Cookie机制： 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随着关闭而结束，这种cookie简称cookie会话。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据依然存在，知道过期时间结束才消失。

LocalStorage

localStorage是HTML5新加入的技术，并非划时代的东西。早在IE6时代，就有叫userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用Flash。而如今，localStorage被大多数浏览器所支持。

SessionStorage

sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。session的意思是“会话”，而作为一个前端概念，他只是可以将一部分数据在当前会话保存下来，刷新页面数据依旧存在，但当页面关闭后，sessionStorage的数据就会被清空。

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

三者的对比---异同

特性	Cookie	LocalStorage	SessionStorage
数据的 生命期	一般由服务器端生成，可设置是失效时间。 如果在浏览器端生成Cookie，默认是关闭浏览器失效。	除非被清除， 否则永久保存	仅在当前会话下有效，如果关闭会话 或者浏览器后被清除
存放数 据大小	4KB左右	一般在5MB左右
与服务 端通信	每次都会携带在HTTP头中，如果Cookie保存过多数据 会带来性能问题。	仅在客户端或者浏览器中保存，不与服务器进行通信
易用性	需程序员自己封装，源生Cookie不友好。	源生接口可以接受，也可以再次封装对Object和Array进行 更好的支持。

 

 

 

 

 

 

 

 

应用场景

Cookie

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

2：保存上次登录时间等信息

3：保存上次查看的页面

4：浏览计数

Session

1：网上商城中的购物车

2：保存用户登录信息

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

4：防止用户非法登录

操作

LocalStorage和sessionStorage具有相同的操作方法

1：sessionStorage.setItem("key“，“value”)

2：sessionStorage.getItem("key")

3：sessionStorage.removeItem("key“)

4：sessionStorage.clear()

5：点操作和[]操作 

      sessionStorage.key = "value"     sessionStorage["key"] = "value"

Cookie

1： vue-cookies

      安装 npm install vue-cookies --save

      使用  import VueCookies from 'vue-cookies'    Vue.use(VueCookies)

       API   this.$cookies.set(keyName,value)   this.$cookies.get(keyName)   this.$cookies.remove(keyName)

2：js-cookie

       安装   npm install js-cookie --save 

       使用   import  Cookies  from  'js-cookie'

       API  Cookies.set('keyName',value)   Cookies.get(keyName)    Cookies.remove(keyName)

       在Cookie中存对象后取出的时候需要把字符串转成json格式   

       const  liaUser  =   JSON.parse(Cookies.get("user"))