浏览器存储

Cookie 的劣势

• 存储大小限制，仅 4kb 左右
• 单个域名下的数量限制，50个左右
• 污染请求头，浪费流量

本地存储 - Web Storage

❝

localStorage 和 sessionStorage 区别

• 相同的使用方法
• 不同的存储时效
• 不同的储存容量

❞

不同的存储时效

• localStorage 存储会持久化（没有储存时间）
• sessionStorage 存储会在网页会话结束后失效，刷新没有问题

不同的储存容量

• localStorage 容量一般在 2~5Mb 左右
• sessionStorage 存储容量不一，部分浏览器不设限

使用 Storage 时的注意点

存储容量超出限制

1. 抛出 QuotaExceededError 异常
2. 存储值时应使用 try catch 避免异常未捕获

存储类型的限制

1. 仅能存储字符串
2. 注意类型转换

sessionStorage 失效机制

1. 刷新页面并不能使 sessionStorage 失效
2. 相同 URL 不同标签页不能共享 sessionStorage

相同的使用方法 API

使用 setItem 方法设置存储内容

// 设置 localStorage
// key 和 value 可以是数字或者字符串，但字符串必须加引号，否则会报错
localStorage.setItem(key, value)

// localStorage 赋值
localStorage.key = value

// 如果 key 是字符串，用以下方式设置 localStorage，key必须要有引号包裹：localStorage['key']
localStorage['key'] = value

// 如果 key 是数字，用以下方式设置 localStorage，key可以不用引号包裹：localStorage[key]
localStorage[key] = value

使用 getItem 方法获取存储内容

// 获取 localStorage
localStorage.getItem(key)

// 这种方式也可以获取 localStorage
localStorage.sgl
localStorage['key']

// 如果 key 是数字，用以下方式无法获取 localStorage，
// 要用这种方法获取：
localStorage[key]
localStorage.getItem(key)

使用 removeItem 方法删除存储内容

// 删除 localStorage
localStorage.removeItem(key)

使用 clear 方法清除所有存储内容

// 清除所有 localStorage
localStorage.clear()

使用 length 属性获取存储内容的个数

// 获取存储内容的个数
localStorage.length

Web Storage 的优化

性能与存储容量大小无关，与读取次数有关

1. 减少读取 item 的次数
2. 单个 item 中尽可能多的存储数据