本地存储：cookie、localStorage

一、cookie

1. 是什么

• cookie全称 HTTP Cookie
• 是浏览器存储数据的一种方式，存储在用户本地，属于本地存储
• 一般会随着浏览器的请求发送到服务器端

2. cookie的作用

• 存储
• 跟踪统计用户访问该网站的习惯，如：什么时间访问、访问了哪些页面、每个网页停留的时间
• 不能在cookie中存储敏感信息

3. 基本用法

• 写入cookie：document.cookie = ‘name=value’，多个名值对需要一个一个分别设置，但如果需要设置其他属性可以“； ”（分号加空格）分隔
• 读取cookie：document.cookie ，读取到的是由名值对构成的字符串，每个名值对之间用“; ”（分号和一个空格）隔开；读取到的是所有的cookie内容

4. cookie的属性

4.1 cookie的名称（name）和值（value）

• 是cookie最重要的两个属性，创建cookie时的必填项！！
• cookie的名或值如果包含非英文字母，则需要使用encodeURIComponent() 编码，读取时使用decodeURIComponent()解码
• 一般名称使用英文，最好不要用中文名称，值可以用中文，但要记得编码

4.2 失效（到期）时间

• 失效的cookie会被浏览器清除
• 没有设置失效时间的cookie，称为会话cookie（session）。会话cookie存在内存中，当会话结束，即浏览器关闭时，会话cookie就会消失
• 可以通过 expires 或 max-age 设置cookie失效时间。
• expires 的值是 Date() 类型的，max-age值为数字类型的，单位是秒，表示当前时间 + 多少秒后过期
• max-age的值如果是 0 或者 负数，则cookie会被清除

document.cookie = `name=dudu; expires=${new Date('2035-01-12 09:12:31')}`
    document.cookie = `age=21; max-age=5` // 存放5秒
    document.cookie = `sex=girl; max-age=${24 * 30 * 3600}` //存放30天

 4.3  domain

• 限定不同域名下cookie访问范围
• 通过JS只能读写当前域或父域的cookie，无法读写其它域的cookie

4.4  path路径

• 限定同一域名下cookie访问范围

当name、domain、path三个字段都相同时，才是属于同一个cookie

4.5 httpOnly

• 设置了该属性的cookie则不能通过JS去访问

4.6 secure安全标志

• 限定了只有使用 https 而非http的情况下才可以发送给服务器端

domain、path、secure都满足条件，且没有过期的cookie才会随着请求发送到服务器

5. cookie的封装

// 写入cookie
// {maxAge,domian,path,secure}={} ：当没有传值时默认为空
const set = (name,value,{maxAge,domain,path,secure}={}) => {
  let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
  if(typeof maxAge === 'number') {
    cookieText += `; max-age=${maxAge}`
  }
  if(domain) {
    cookieText += `; domain=${domain}`
  }
  if(path) {
    cookieText += `; path=${path}`
  }
  if(secure) {
    cookieText += `; secure}`
  }
  document.cookie = cookieText
}

// 通过name获取cookie的value值
const get = name => {
  // 确保可以读取到值，避免因为中文出错
  name = `${encodeURIComponent(name)}`
  const cookies = document.cookie.split('; ')
  for(const item of cookies) {
    const [cookieName,cookieValue] = item.split('=')
    if(cookieName === name) {
      return decodeURIComponent(cookieValue)
    }
  }
  return
}

// 通过name、domain、path删除cookie
const remove = (name,{domain,path}={}) => {
  // max-age的值如果是 0 或者 负数，则cookie会被清除
 set(name,'',{domain,path,maxAge:0})
}
export {
  set,
  get,
  remove
}

• 每个域名下的cookie有数量限制，当超过限制后在设置cookie，浏览器会删除之前设置的cookie
• 每个cookie的存储容量很小，最多4kb左右，不同浏览器有不同

二、localStorage

1. 是什么

• localStorage也是浏览器存储数据的方式，但是它只会存储在本地，不会发送到服务器
• 单个域名下的localStorage总大小有限制，数值与浏览器相关

2. 使用

• 存储数据：localStorage.setItem(key,value)
• 查看长度：localStorage.length
• 读取数据：localStorage.getItem(key)
• 删除数据：localStorage.removeItem(key)
• 清空数据：localStorage.clear()

3. 其他

• localStorage存储的内容不会随浏览器关闭而清除，需要手动清除（js删除、清除浏览器缓存）
• sessionStorage存储的内容会随浏览器窗口的关闭而被清除
• localStorage 存储的键和值必须是字符串类型
• 不同域名不可以共用localStorage
• IE7及以下版本不支持localStorage     查看兼容性

4. localStorage的封装

// 简化写法，避免每次写localStorage
const storage = window.localStorage

// 设置
const set = (key,value) => {
  storage.setItem(key,JSON.stringify(value))
}

// 读取数据
const get = key => {
 return JSON.parse(storage.getItem(key))
}

// 删除数据
const remove = key => {
  storage.removeItem(key)
}

// 清空数据
const clear = () => {
  storage.clear()
}

export {
  set,
  get,
  remove,
  clear
}