转：localStorage 还能这么用

localStorage 还能这么用

HTML5中 Web Storage 的出现，主要是为了弥补使用 Cookie 作为本地存储的不足。Cookie 存储的数据量非常小，而且数据会自动携带到请求头里，但服务器端可能并不关心这些数据，所以会造成带宽的浪费。

Web Storage 提供了两个存储对象：localStorage 和 sessionStorage。

sessionStorage 存储的数据仅在本次会话有用，会话结束后会自动失效，而且数据仅在当前窗口有效，同一源下新窗口也访问不到其他窗口基于
sessionStorage 存储的数据。也是由于这些特性，导致 sessionStorage 的使用场景会比较少。

localStorage 可以永久存储，而且同源下数据多窗口也能共享，。看起来很美好，但 localStorage 也有短板，绝大多数浏览器有 5M 的大小限制。但是这不足以成为大家使用 localStorage 的障碍，要知道 Cookie 只有 4K 的大小，多了一千多倍，偷着乐吧。

localStorage 的基本使用

讲这个内容的文章网上太多了，现在再来讲有点老套了。这里就不做更多介绍了，不清楚的读者可以看这里。

有两点需要注意一下。在 setItem 时，可能会达到大小限制，最好加上错误捕捉 1：

try {  
  localStorage.setItem(key, value); } catch(e) { if (isQuotaExceeded(e)) { // Storage full, maybe notify user or do some clean-up } } function isQuotaExceeded(e) { var quotaExceeded = false; if (e) { if (e.code) { switch (e.code) { case 22: quotaExceeded = true; break; case 1014: // Firefox if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') { quotaExceeded = true; } break; } } else if (e.number === -2147024882) { // Internet Explorer 8 quotaExceeded = true; } } return quotaExceeded; }

另外在存储容量快满时，会造成 getItem 性能急剧下降 2。

我们下面看看 localStorage 有哪些脑洞大开的用法。

缓存静态文件

你不禁要问，HTTP 协议不是本来就支持缓存文件吗（之前写过一篇文章《Web缓存之HTTP指南》），为什么还要使用 localStorage 来缓存？为了可编程化，通俗一点说就是把命运握在自己手中。

HTTP 协议的缓存，可以由用户浏览器清除或禁用缓存，也可以由 Web 服务器设置过期时间或不缓存。对于前端工程师，这更像是一个黑盒，想要决定文件是访问缓存还是访问远程显得有些力不从心了。

使用 localStorage 控制文件缓存的方式有两种：

使用 Loader 加载静态文件
借助服务器端将静态文件 inline 化

这两种方式一般都会提前做好缓存过期策略，通常是使用版本号来控制，下面还会细讲。否则文件新版上线，用户客户端还是旧版，这就麻烦大了，而且这类问题，还不好调试不好重现。

使用 Loader 加载静态文件

由于请求都是动态发出的，所以可以对请求拦截处理。大致流程如下：

查看请求的文件 url 是否有缓存到 localStorage
1. 如果没有，到第 2 大步
2. 如果有，判断文件是否过期或版本号是否匹配
  1. 过期或不匹配，到第 2 大步
  2. 文件内容有效，到第 4 大步
请求远程文件
缓存最新文件内容
执行文件内容

这个方式有个开源库：basket.js。

借助服务器端将静态文件 inline 化

这个方式比上面那种更进一步，在第一次响应时把需要放入 localStorage 的文件都内联进 html 中，后面每次响应只要文件版本没有变化，都是渲染一段从 localStorage 加载该文件的代码。这样做的好处是可以有效减少请求次数，即使是第一次。

版本号不匹配（版本号可记在 Cookie 中，第一次访问没有版本号），服务端响应内容：

> function script2ls(id) { var script = document.getElementById(id); if (script) { localStorage[id] = script.innerHTML; } } >