本地存储cookie、localStorage、sessionStorage

1. cookie

Cookie全称是HTTP Cookie，简称Cookie，是浏览器存储数据的一种方式。一般会自动随着浏览器每次请求发送到服务器端。

• 存储大小：<= 4k
• 失效时间：根据cookie设置的失效时间决定，到期自动删除。如果没有设置cookie失效时间或者cookie失效时间为0或负数，浏览器关闭cookie里的数据会被删除
• 服务端客户端都可以存储
• cookie设置
  • document.cookie — 可以设置和获取cookie的值

  //新增cookie
  document.cookie = 'name=zhangsan'
  //读取cookie
  console.log(document.cookie)
  

2. localStorage

是浏览器存储数据的一种方式，只存储在本地，不会发送到服务器端。

• 存储大小：5M
• 失效时间：数据永久保存，除非用户手动删除
• 客户端存储
• localStorage设置

方法和属性	作用
setItem(key, value)	新增或修改存储数据
getItem()	读取数据
removeItem(key)	根据键名删除对应的数据
hasOwnProperty(key)	查找localStorage是否存在键名为key的值
valueOf()	获取所有存储数据
clear()	清除所有存储数据
length	获取localStorage存储数据的个数

localStorage.setItem('num', 12)
localStorage.setItem('str', '12')
localStorage.setItem('obj', JSON.stringify({ name: 'lisi', age: 22}))
console.log(localStorage.getItem('num')) // 12
localStorage.removeItem('str')
console.log(localStorage.hasOwnProperty('str')) // false
console.log(localStorage.hasOwnProperty('num')) // true
console.log(localStorage.valueOf()) // 返回一个Storage对象，对象里面包含存储的数据和大小
console.log(localStorage.length) // 2

3. sessionStorage

是浏览器存储数据的一种方式，只存储在本地，不会发送到服务器端。

• 存储大小：5M
• 失效时间：页面或浏览器关闭
• 客户端存储
• sessionStorage设置 — 方法和属性和localStorage相同

4. 扩展

4.1 加密存储

加密存储是一种将Cookie加密后存储的方法。它可以保护Cookie中的敏感信息，如用户的密码。加密存储可以通过对Cookie进行加密和解密来实现。常见的加密算法有AES和RSA。

4.2 HttpOnly标记

HttpOnly标记是一种将Cookie标记为只能通过HTTP协议访问的方法。它可以防止恶意脚本通过JavaScript来访问Cookie。HttpOnly标记可以通过在Set-Cookie头中添加HttpOnly属性来实现。

4.3 Secure标记

Secure标记是一种将Cookie标记为只能通过HTTPS协议访问的方法。它可以保护Cookie中的敏感信息，如用户的密码。Secure标记可以通过在Set-Cookie头中添加Secure属性来实现。