JavaScript浏览器端数据存储方案之Web S

JavaScript浏览器端数据存储方案之Web Storage篇

做项目的过程中，我们经常遇到需要把信息存储在本地的情况，比如权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等，我们可以暂存一下避免浏览器不必要的请求和客户多余操作，给客户使用带来方便。

上一篇讲了JavaScript浏览器端数据存储方案之Cookie篇，这篇文章主要介绍localStorage和sessionStorage。

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

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

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

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

localStorage 的基本使用

localStorage.setItem("b","isaac");//设置b为"isaac"
var b=localStorage.getItem("b");//获取b的值,为"isaac"
var a=localStorage.key(0); // 获取第0个数据项的键名，此处即为“b”
localStorage.removeItem("b");//清除c的值
localStorage.clear();//清除当前域名下的所有localstorage数据

这里和大家分享一段我们在VUE项目中封装使用的localStorage，大家可以借鉴实现的思路

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

另外在存储容量快满时，会造成 getItem 性能急剧下降。我们下面看看 localStorage 有哪些脑洞大开的用法

缓存静态文件

你不禁要问，HTTP 协议不是本来就支持缓存文件吗，为什么还要使用 localStorage 来缓存？为了可编程化，通俗一点说就是把命运握在自己手中。

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

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

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

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

使用 Loader 加载静态文件

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

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

这个方式有个开源库：basket.js（可以在github上访问）

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

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

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

<script> 
function script2ls(id) { 
 var script=document.getElementById(id);
 if (script) {
 localStorage[id]=script.innerHTML;
 }
}
</script>
<script id="jquery.js">...jquery source code...</script> 
<script>script2ls('jquery.js')</script>

版本号匹配，服务端响应内容：

<script> 
function ls2script(id) { 
 var script=document.createElement('script');
 script.text=localStorage[id];
 document.head.appendChild(script);
}
</script>
<script>ls2script('jquery.js')</script>

不过使用 localStorage 缓存文件会有 XSS 的风险，而且造成的伤害可能是永久的

同源窗口通信

你可能不禁又要问，不是有 postMessage 吗？没错 postMessage 确实可以用于窗口或 iframe 间通信，但是前提是你必须拿到打开新窗或 iframe 的句柄对象：

var popup=window.open(...popup details...); 
popup.postMessage("hello there!", "http://example.com");

这样在新窗中再打开新窗，似乎就不好传递消息了。

你可能还想问，为什么要在窗口间通信？好问题，没有应用场景的技术都是耍流氓。像多窗口共用的一些组件，而且对数据实时同步都有较高要求的都会是这个技术的应用场景。比如通知中心上面的未读数量，两个窗口，A 窗口更新为 8，切到 B 窗口还是 9，这就造成了体验不一致，这个例子可能还觉得无关痛痒；再比如购物车，两个产品窗口，A 窗口添加到购物车，切到 B 窗口添加到购物车，发现没有 A 添加的产品，这样就比较严重了。这当然也可以通过每个窗口都与后台建立连接来更新，但用户如果开十几个窗口就开销大了。

有了同源窗口通信，我们就可以只有一个窗口与后台建立连接，收到更新后，广播给其他窗口就可以。说了这么多，实现原理是怎样的呢？

其实原理也简单，每次 localStorage 中有任何变动都会触发一个 storage 事件，所有窗口都监听这个事件，一旦有窗口更新 localStorage，其他窗口都会收到通知，根据事件中的 key 把不关心的变动过滤掉。原理是很简单，但是要实现一套完整的广播机制还是有些复杂，你需要：

管理好每个窗口的唯一 ID
防止消息重复
防止消息发给不关心的窗口
窗口心跳 keep alive
主窗口选举
...

不用担心，已经有了不错的开源实现：diy/intercom.js、tejacques/crosstab

作为前端 DB 的存储介质

你可能不满足于用键值对保存数据，你还想保存更复杂的数据结构。

灵活存取 json 格式的数据：typicode/lowdb

通过 sql 对数据 CURD 操作：agershun/alasql

表单自动持久化

在填写表单时，遇到浏览器奔溃或者误操作导致填写内容丢失，此刻用户的内心也应该是奔溃的。误操作还可以加一个 beforeunload 事件，在关闭浏览器或跳出当前页前提醒一下用户。那浏览器崩溃呢，将数据变更实时保存到后台，这样似乎开销很大，实时保存到 localStorage 是个不错的解决方案，真巧，也有一个开源实现：simsalabim/sisyphus

ebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。

WebStorage两个主要目标：

（1）提供一种在cookie之外存储会话数据的路径。

（2）提供一种存储大量可以跨会话存在的数据的机制。

web存储更加安全与快速，这些数据还不会保存到服务器，还可以存储大量数据而不影响网站性能。

web 存储类型

localStorage - 用于长久保存数据，没有有效期，直到手动清除。
sessionStorage - 临时保存当前窗口的数据，窗口关闭之后自动清除。

不管是 localStorage 还是 sessionStorage 使用方法都是一样的语法，对常见操作语法进行示范。以下就以localStorage为例：

常见操作语法：

保存数据：

localStorage.key=value

localStorage.setItem(key,value)

获取数据

localStorage.key

localStorage.getItem(key)

删除单个数据：

localStorage.removeItem(key)

delete localStorage.key

删除全部：localStorage.clear()
获取某个索引的键值：localStorage.key(index)

数据都是以键值对形式存在的，操作的时候与json有点类似。

web存储数据应用

应用1：取出本地存储的所有数据，以localStorage为例。

localStorage和sessionStorage是两个对象，类似json。可遍历取出数据，如：

localStorage.user="倩倩"
localStorage.age="18"
localStorage.job="打杂"
console.log(localStorage)// {job: "打杂", age: "18", user: "倩倩", length: 3}
for(key in localStorage){
 console.log(`${key}--${localStorage[key]}`)
}

运行程序之后，结果如图：

我们发现遍历的时候把localStorage的属性和方法全部打印出来了，而我们需要的只是我们存储的三个数据，其余的都不要，此时我们换个方法。

localStorage.user="倩倩"
localStorage.age="18"
localStorage.job="打杂"
console.log(localStorage)// {job: "打杂", age: "18", user: "倩倩", length: 3}
for(let i=0;i<localStorage.length;i++){
 let key=localStorage.key(i)
 console.log(`${key}:${localStorage[key]}`)
}

此时运行结果就是我们需要的结果了！

记住用户登录信息、存草稿、存邮件等经常会使用 localStorage，我们介绍下几种存储方式的区别，可以更好地根据需求选择存储方式。

几种存储方式区别

cookies 和 sessionStorage、localStorage区别如图：

上述看三者存储大小有很大差异，存储内容上也不同，cookie只能保存字符串类型，但sessionStorage和localStorage能够支持任何类型的对象存储。如果保存复杂json数据时，可以转成字符串保存，取出时通过JSON.parse()转成json格式。

安全性方面，web 存储不会发送到服务器端，不用担心被截获，所以相对cookie安全些。

实例：网页中写信，自动保存草稿，网页关闭重新打开之后数据依旧存在。

<textarea name="" id="email" cols="30" rows="10" oninput="save()"></textarea>
<script>
 function save(){
  var x=document.getElementById("email")
  localStorage.setItem('email',x.value)
 }
 window.onload=function(){
  var x=document.getElementById("email")
  x.value=localStorage.getItem("email")
 }
</script>

注意：如果你是直接使用浏览器打开html文件，此时发现并不会存储，需要声明下存储是针对域的，所以我们需要放到服务内，服务内访问才可以进行缓存。

需要的同学自己去下载个nginx。

TML本地存储有cookies、 localStorage 、sessionStorage、Web SQL、IndexedDB。

以下是它们的区别

cookies：在HTML5标准前本地储存的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装
localStorage：HTML5加入的以键值对(Key-Value)为标准的方式，优点是操作方便，永久性储存（除非手动删除），大小为5M，兼容IE8+
sessionStorage：与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，他不能在所有同源窗口中共享，是会话级别的储存方式
Web SQL：2010年被W3C废弃的本地数据库数据存储方案，但是主流浏览器（火狐除外）都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。
IndexedDB：是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。

在线咨询

上一篇：先睹为快即将到来的HTML6
下一篇：2024年开发人员必备的VS Code插件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript浏览器端数据存储方案之Web S

web 存储类型

web存储数据应用

几种存储方式区别

您的项目需求