小林笔记

Appearance

浏览器存储 ​

Cookie 最初设计的目的是为了帮助网站跟踪用户，以此实现个性化的体验并改善业务流程。它可以存储 4kb 数据，并且在发起 HTTP 请求时会被附带被发送到远程服务器。 因为 Cookie 容易被篡改和泄漏，不应该存储隐私敏感信息。

使用 document.cookie 设置 cookie，key 是键，value 是值，date 是过期时间（ GMT 格式）

js
document.cookie = 'key=value;expires=date'

var key = 'MyCookie'
var value = 'The value of my cookie'
var expires = 'Fri, 08 Jan 2019 00:00:00 GMT' // 以 GMT 格式过期日期。

document.cookie = key + '=' + value + ';expires=' + expires

同样通过 document.cookie 来读取值，操作略显麻烦。

js
document.cookie = 'name=张三; age=18; color=blue'
let myObject = {}

document.cookie.split('; ').forEach(item => {
  let parts = item.split('=')
  let key = parts[0]
  let value = parts[1]
  myObject[key] = value
})

console.log(myObject)
// Output: { name: '张三', age: '18', color: 'blue' }

Web Storage ​

Web Storage 是浏览器提供的持久本地存储，分为 localStorage 和 sessionStorage 两种类型，前者会永久保存，该数据只保存在浏览器中，直到用户手动清除。而后者存储的数据只在当前会话下有效，关闭页面或浏览器后即失效。

以下是 localStorage 的使用，sessionStorage 也类似。

js
localStorage.setItem(key, value) // 向 localStorage 中添加键/值对
localStorage.getItem(key) // 从 localStorage 中检索键/值对
localStorage.removeItem(key) // 从 localStorage 中移除键/值对
localStorage.clear() // 清除所有的localStorage

注意

Web Storage 也严格遵守同源策略。

Cookie、Web Storage 区别 ​

  • 传输：Cookie 参与，Web Storage 不参与网络；
  • 大小：Cookie 最多 4k，Web Storage 一般是 5M；
  • 操作：Cookie 需要自己封装， Web Storage 拥有 setItem,getItem,removeItem,clear 等方法；