本地存储

// TODO：重整

Cookie

初识 cookie

• 浏览器存储数据的一种方式
• 因为存储在用户本地，而不是存储在服务器上，是本地存储
• 一般会自动随着浏览器每次请求发送到服务器端

作用：利用cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等

cookie 的基本方法

1. 写入cookie: 不能一起设置，只能一个一个设置

document.cookie = 'username=zs'
document.cookie = 'age=18'

2. 读取cookie:读取的是一个由名值对构成的字符串，每个名值对之间由“;"”（一个分号和一个空格）隔开

document.cookie //username=zs; age=18

cookie 的属性

1. cookie的名称Name和值Value

• 最重要的两个属性，创建cookie时必须填写，其他属性可以使用默认值
• cookie的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent()编码，读取时使用decodeURIComponent()解码

document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
  '张三'
)}`
console.log(decodeURIComponent(document.cookie))

• 一般名称名称使用英文，不要用中文，值可以使用中文，但是要编码

2. 失效（到期）时间

• 对于失效的cookie，会被浏览器清除

• 如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie ，它存在内存中，当会话结束，也就是浏览器关闭时， Cookie 消失

• 想长时间存在，需要设置expires或 max-age

1. expires值为 Date 类型
2. max-age值为数字，表示当前时间+多少秒后过期，单位是秒；如果max-age的值为 0 或负数，则cookie会被删除

document.cookie = `username=zs; expires=${new Date('2100-1-01 00:00:00')}`
document.cookie = `username=zs; max-age=${24 * 3600 * 30}` // 存活30天

• Domain 域

Domain限定了访问cookie的范围（不同域名），使用JS只能读写当前域或父域的cookie，无法读写其他域的 cookie

document.cookie = 'username=alex;domain=www.immoc.com'
// 当前域： www.immoc.com  www.m.imooc.com
// 父域： .imooc.com

• path 路径

path限定了访问cookie的范围（同一域名），使用 JS 只能读写当前路径和上級路径的 Cookie，无法读写下级路径的 Cookie

当Name、 Domain、Path这 3 个字段都相同的时候，才是同一个 cookie

• HttpOnly

设置了 Httponly 属性的 Cookie 不能通过 JS 访问

• Secure 安全标志

限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

Domain、path、 Secure都要满足条件，还不能过期的 Cookie 才能随着请求发送到服务器端

Cookie 的封装

::: tip js-cookie:一个用于处理cookie的简单、轻量级JavaScript API

JavaScript Cookie 官方文档

js-cookie 总结，vue 构建的项目中使用 js-cookie 插件

前端鉴权的兄弟们：cookie、session、token、jwt、单点登录 :::

// 写入cookie
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的值
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 undefined
  }
}
const remove = (name, { domain, path }) => {
  set(name, '', { domain, path, maxAge: -1 })
}
export { set, get, remove }

cookie 的注意事项

1. 前后端都可以创建cookie

2. cookie有数量限制:当超过单个域名限制之后，在设置cookie,浏览器就会清除以前设置的cookie

3. cookie 有大小限制:每个cookie的存储容量很小，最多只有 4kB 左右

localStorage

认识 localStorage

• localStorage也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端

• 单个域名下的localStorage总大小有限制

• 基本用法：

localStorage.setItem('username', 'alex')
console.log(localStorage.length)
localStorage.getItem('username') //获取不存在的返回null
localStorage.removeItem('useraname') //删除不存在的key,不报错
localStorage.clear() // 全部清除

localStorage 的注意事项

1. 存储期限
   持久化的本地存储，除非手动清除，比如通过 js 删除，或者清除浏览器缓存，否则数据是永远不会过期的。

::: tip sessionStorage 当会话结束的时候，sessionStorage的数据会被清空,用法和localStorage一样 :::

2. localStorage键和值的类型

存储的键和值只能是字符串类型,不是字符串类型，也会先转化为字符串类型再存进去

3. 不同域名下不能共用localStorage

4. 兼容性:ie7以下不支持

::: tip 查看网络技术的浏览器支持 Can I use____? :::

cookie,localStorage,SessionStorage 三者对比

见 前端面试-> 计网&浏览器面试题