与 sessionStorage 的区别

• sessionStorage 存储的数据只在当前窗口可以访问，重现打开窗口不可用
• localStorage 数据可以永久存储，同源窗口可共享数据；一般浏览器大小限制为 5M

localStorage 基本使用

• localStorage.setItem(key, value)
• localStorage.getItem(key)

使用 localStorage 的错误处理

• 用户禁用 localStorage，此时仅仅时访问 localStorage 对象就会报错

// Assuming you’re not in global scope…
var localStorage;
try {
  localStorage = window.localStorage;
} catch(e) {
  // Access denied :-(
}

• 数据大小超出限制

try {
  localStorage.setItem(key, value);
} catch(e) {
// 一些浏览器的错误码可能不同
  if (e.code == 22) {
    // Storage full, maybe notify user or do some clean-up
  }
}

• 当存储的数据越多时，getItem() 访问速度越慢

localStorage 的其他用法

1. 同源窗口通信
   根据 localStorage 的特征，当数据变动时会触发 onmessage 事件，同源窗口可以监听事件来进行通信；（参考已实现的开源项目： crosstab）

2. 将文件缓存在 localStorage 中
   每次请求资源可以从 localStorage 中返回，会有 xss 风险；（以实现的开源项目：basket.js)

参考

localStorage 还能这么用