JS-sessionStorage、localStorage和cookie

sessionStorage

仅在浏览器当前窗口关闭之前有效,即使是刷新或者进入该窗口下的的另一个页面，数据也仍然存在；关闭浏览器或到另一个窗口，数据就是不存在的。

      // 设置sessionStorage保存到本地，第一个为变量名，第二个是值
      sessionStorage.setItem('sessionName', '可乐')
      // 获取数据
      sessionStorage.getItem('sessionName')
      // 删除保存的数据
      sessionStorage.removeItem('sessionName')
      // 清除所有保存的数据
      sessionStorage.clear()

localStorage

始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。

      //设置localStorage保存到本地，第一个为变量名，第二个是值
      localStorage.setItem('username', '安琪拉')
      // 获取数据
      localStorage.getItem('username')
      // 删除保存的数据
      localStorage.removeItem('username')
      // 清除所有保存的数据
      localStorage.clear()

cookie

cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技术。

特点

1. 存储大小有限制，一般是 4 KB 左右

2. 数量有限制，一般是 50 条左右

3. 有时效性，也就是有过期时间，未设置的话是 会话级别（也就是浏览器关闭就过期了）

4. 有域名限制，在哪个域名下存储的cookie，只能在哪个域名下访问

使用场景

会话状态管理（如用户登录状态、购物车等）

个性化设置（保存用户设置的样式等）

浏览器行为跟踪（如跟踪分析用户行为等）

使用方法

设置cookie：

document.cookie = "key=value;"
document.cookie=x+"="+y+";max-age="+(3600*24);//设置一天过期

获取cookie：

function getCookie(key) {
    let strCookie=document.cookie;
    //将多cookie切割为多个名/值对
    let arrCookie=strCookie.split("; ");
    for (let i = 0; i < arrCookie.length; i++) {
        let tmp = arrCookie[i].split('=');
        if (tmp[0] == key) {
            return tmp[1];
        }
    }
}
let 变量名=getCookie(key);

注意：sessionStorage / localStorage / cookie 存储的都是字符串类型