Cookie、localStorage、以及sessionStorage

1.cookie：体积小，只能缓存4KB，可以设置有效期，若不设置，在网页窗口关闭或者跳转网页时cookie就会失效。cookie不提供修改和删除，但只需要建立同名cookie名就可以覆盖原来的cookie。 cookie的安全性一般。

    var date = new Date()
    var days = 1//设置天数
    date.setTime(date.getTime() + (days*24*60*60*1000));
    var expires = "expires="+ date.toUTCString();
    document.cookie = "name = zhangshan;" + expires + "; path=/;"
    document.cookie = "name = yyt;expires= " + date + "; path=/;"
    document.cookie = "age = 18"
    // let c = document.cookie.split(";") //转为数组
    let c = document.cookie
    console.log(c)

2.sessionStorage：保存在客户端，可保存5MB的数据，关闭浏览器数据就会消失，页面刷新不会消除数据，只有在当前页面打开的链接，才可以访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;

应用场景：登录的状态

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value')

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

3.localStorage：保存在客户端，可保存5MB的数据，生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果想设置失效时间，需自行封装。

应用场景：长期登录

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();