本质

1. Cookie 是服务器一个响应头，浏览器一个请求头
2. Session 是一个值为随机数的 Cookie
3. localStorage 是浏览器永久储存的一个哈希
4. sessionStorage 是浏览器临时储存的一个哈希

Cookie 详解

详见 Cookie 详解

Session 详解

详见 在登录注册中使用 Cookie 和 Session

localStorage 详解

1. 相关方法

   setItem()
   getItem()
   removeItem()
   clear()

2. 应用场景

做只弹一次的提示框

记录没有提示过与没提示过的用户，是 localStorage 的常用场景

let already = localStorage.getItem('已经提示')
if(!already) {
    alert('提示一次)
    localStorage.setItem('已经提示', True)
}

1. 注意 localStorage 存的是字符串

存放对象的时候需要转换

通过一个简单试验可以说明

localStorage.setItem('object', {name: 'obj'})

正因为存的是字符串，所以放入对象的时候调用了 toString 方法导致值为 [object Object]

sessionStorage 详解

类似 localStorage，也是浏览器 api，相关方法，特性，容量也一样，唯一区别是有效期

localStorage 只要不删一直都在, sessionStorage 关闭页面就消失

区别

1. Cookie 与 localStorage 的区别

   • Cookie 每次请求都上传到服务器，localStorage 不会被带到服务器
   • Cookie 大小 4K，localStorage 5M
   • Cookie 默认用户关闭页面后到期，后台代码可以设置过期时间，localStorage 永久存储

Cookie 每次请求都会被带到服务器，对请求速度有影响，若需持久化存储，优先选择 localStorage

1. session 与 localStorage 的区别

   • session 与 localStorage 都是哈希，前者是存在服务器的哈希表，后者是存在浏览器的哈希表