localStorage、sessionStorage

一、WebStorage

本地存储，存放在客户端，不参与服务端通信（存储大小5M）

localStorage和sessionStorage只能存储字符串类型，以键值对形式存储

存储数据前：利用JSON.stringify将对象转换成字符串

获取数据后：利用JSON.parse将字符串转换成对象

1、localStorage

(1)在同源条件下（相同协议、主机、端口号），就能读取到同一份localStorage
(2)localStorage理论上是永久的，如果不主动清空的话，数据是持久化的
(3)localStronge原生不支持设置过期时间，如有需要，需自行封装

function set(key,val){
 let currentTime = new Date().getTime()
 let kvp = JSON.stringify({val,currentTime})
 localStroge.setItem(key,kvp)
}

//expTime 过期时间（秒）
function get(key,expTime){
 let data =JSON.parse(localStroge.getItem(key))
 let timeDiff=parseInt(new Date().getTime - data.currentTime)/1000  //当前时间-创建localStroge的时间
 if( timeDiff>exp){
   console.log('当前localStroge已过期')
 }else{
    console.log(data.val)
 }
}

2、sessionStorage

(1)除在同源条件外，还需要在相同窗口,才可以读取到同一份sessionStroge
(2)sessionStroge会话结束后（关闭窗口/关闭浏览器），数据随之销毁（注：重新加载和恢复页面仍保持原来的会话状态）

二、Cookie 和 Session

HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份;session 的运行依赖 session id，而 session id 是存在 cookie 中的