cookie是服务器发给浏览器的一段大小为4kb以内的文本信息，浏览器向服务器发送请求是需要附带上。

  • 用途：

    • 对话（session）管理：保存登录、购物车等需要记录的信息。
    • 个性化信息：保存用户的偏好，比如网页的字体大小、背景色等等。
    • 追踪用户：记录和分析用户行为。

  • cookie包含的元数据

    • Cookie 的名字
    • Cookie 的值（真正的数据写在这里面）
    • 到期时间（超过这个时间会失效）
    • 所属域名（默认为当前域名）
    • 生效的路径（默认为当前网址）

  • cookie的生成和发送
    生成：如果服务器希望浏览器保存cookie，需要的响应头设置Set-Cookie字段，字段包含多个cookie的属性。
    发送：浏览器向服务器发送请求时附带之前已经保存好的cookie，可以是多个cookie。

  • cookie的属性

    • Expire
      一个具体的过期时间，如2020年8月20号过期。到期后浏览器将不再保存cookie，由于是本地时间，既不精准也可以通过修改本地时间而导致失准。
    • Max-Age
      一个绝对的时间，如100000秒后过期，Max-Age会优先于Expire使用，如果既没有设置Expire也没有也只MaxAge，浏览器窗口关闭后，cookie就不再被保存。
    • Path
    • Domain
    • HttpOnly
      指定该cookie无法使用js脚本读取到，只有浏览器发起http请求的时候才会带上cookie

storage

storage用于脚本在浏览器保存数据，分为两个接口：localStorage和sessionStorage

  • localStorage 数据长期保存，需要手动清理数据。
  • seesionStorage 数据在会话期间保存，关闭浏览器窗口即清空数据。
  • API
    • storage.getItem('key') 用于读取数据，参数是一个字符串形式的键名
    • storage.setItem('key',value) 两个参数以key、value形式写入数据，也可以知己赋值
      效果等同
window.sessionStorage.setItem('foo', '123');
window.localStorage.foo = '123';
    • storage.removeItem('key')
    • storage.clear()
    • storage.key(index) 传入一个数值index,返回对应位置的键名。