转:localStorage 还能这么用
地址:https://iammapping.com/the-other-ways-to-use-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
- 如果没有,到第 2 大步
- 如果有,判断文件是否过期或版本号是否匹配
- 过期或不匹配,到第 2 大步
- 文件内容有效,到第 4 大步
- 请求远程文件
- 缓存最新文件内容
- 执行文件内容
这个方式有个开源库:basket.js。
借助服务器端将静态文件 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 的风险,而且造成的伤害可能是永久的 3。
同源窗口通信
你可能不禁又要问,不是有 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
总结
文件缓存现在有更好的解决方案,没错,说的就是 Service Worker 的 CacheStorage。
不过多了解一些脑洞大开的想法,有利于拓展解决问题的思路。
Enjoy open source ❤️
参考:
1:Always catch LocalStorage security and quota exceeded errors
2:Measuring localStorage Performance
3:使用 SRI 增强 localStorage 代码安全
转:localStorage 还能这么用的更多相关文章
- HTML5的本地存储 LocalStorage
localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...
- 浅谈localStorage本地存储
在年会的抽奖程序中用到了localStorage现在拿出来总结下,localStorage的相关用法. 在年会抽奖的程序中,需要把获奖名单存储下来,年会现场没有网络,能最简单实现数据存储的方式就是,将 ...
- JavaScript 学习笔记 - LocalStorage
前言 本文主要介绍本地存储的基本使用,以及它和 Cookie.SessionStorage 的区别. 简单回顾 Cookie 在 HTML5 之前,本地存储数据一般是通过 Cookie 来完成的.我们 ...
- JavaScript本地存储实践(html5的localStorage和ie的userData)
http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日 ...
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
- javascript 进阶篇1 正则表达式,cookie管理,userData
首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语 ...
- HTML5 LocalStorage 本地存储,刷新值还在
H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStorage会话存储,页面关闭数据就会丢失. 使用方法: localStor ...
- cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...
- 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考
首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...
随机推荐
- 20165218 《网络对抗技术》Exp3 免杀原理与实践
Exp3 免杀原理与实践 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧 使用VirusTotal或 ...
- 单点登录(五)-----遇到问题-----cas server 源码部署tomcat运行报错BeanCreationException:Error creating bean with name 's
我们在上一篇文章已经解决了把下载好的cas server源码部署到tomcat缺少子项目编辑文件或者jar包导致找不到class报错的问题 单点登录(四)-----遇到问题-----cas serve ...
- Web前端之Javascript详解20180330
一.javascript概述 javascript是基于对象和事件的脚本语言. 特点: 1.安全性(不允许直接访问本地硬盘(因为是被远程的浏览器解释)),它可以做的就是信息的动态交互 2.跨平台性(只 ...
- 团体程序设计天梯赛 L3-012. 水果忍者
/*对于一条满足条件的直线,向下移,直到触碰一条线段的下端点,仍然经过其它线段,该直线仍然满足条件 即以一条线段的下(上)端点作为直线上的一点,求为了经过一条线段的最小.最大斜率值(mink,maxk ...
- joda-time 2.5 包简化java时间操作
原文:https://www.ibm.com/developerworks/cn/java/j-jodatime.html Joda-Time 简介 既然无法摆脱时间,为何不设法简化时间处理? J P ...
- 面向对象SOLID原则的自我理解
S.O.L.I.D 是面向对象设计(OOD)和面向对象编程(OOP)中的几个重要编码原则(Programming Priciple)的首字母缩写.面向对象设计的原则SRP The Single Res ...
- Docker入门与应用系列(四)网络管理
一.Docker的五种网络模式 在使用docker run创建docker容器时,可以用--net选项指定容器的网络模式,Docker有以下5种网络模式: 1. bridge模式 使用docker r ...
- PDF文本内容批量提取到Excel
QQ:231469242,版权所有 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269 ...
- solr分组排序实现group by功能
http://wiki.apache.org/solr/FieldCollapsing solr分组排序,实现group by功能,代码待添加!
- Matlab修改背景颜色
步骤: 1, 在matlab命令行中运行prefdir, 获取matlab.prf文件所在路径 2, 打开matlab.prf所在路径, 找到matlab.prf文件, 作备份 3, 将以下内容添加到 ...