关于 HTML5 LocalStorage 的 5 个不为人知的事实

更新日期: 2022-10-14阅读: 841标签: 存储

LocalStorage 是html5中一个方便使用的 api,它为 Web 开发人员 提供了一个易于使用的5MB的存储空间。使用 LocalStorage API 真的再简单不过了。不信看下:

//Save a value to localStorage
localStorage.setItem('key', 'value to save');
//OR
localStorage.key = 'string value to save';

//Get the value back out of localStorage
localStorage.getItem('key');
//OR
localStorage.key;

//Clear all localStorage values
localStorage.clear();

localStorage API 非常简单,但是很容易忽略有关它们的一些重要细节。关于这个简单的 API,您可能不知道(或可能已经忘记)以下五件事:


1. Secure (SSL) 页面上的 LocalStorge 值是隔离的

根据草案规范,浏览器根据 协议 + 主机名 + 唯一端口(也称为HTML5 Origin)隔离 LocalStorage 值。主机名实现隔离是我们所预期的,因为我们不希望恶意网站访问我们网站的 LocalStorage 数据。但是协议为什么也隔离(即http和https)?

这种隔离的结果意味着保存到http://htmlui.com上的 LocalStorage 的值不能被从https://htmlui.com的页面访问(反之亦然)。

因此如果您的网站同时提供 HTTP 和 HTTPS 页面,请务必小心。(注意:Firefox 提供了一个专有的GlobalStorage,它没有这种 HTTP/HTTPS 隔离。)


2. SessionStorage 值在某些浏览器重启后仍然存在

SessionStorage 与 LocalStorage 不同,它不是为在用户浏览器中长期保存值而设计的。相反,SessionStorage 中的值会在浏览器会话结束时被销毁,这通常是在浏览器窗口关闭时。

不过有一个例外。

当浏览器提供“恢复会话”功能时,通常旨在帮助用户从浏览器/计算机崩溃中快速恢复,SessionStorage 中的值也将被恢复。因此,虽然它是服务器上的一个新“会话”,但从浏览器的角度来看,它是浏览器重启后单个会话的延续。

这使得 SessionStorage 成为一种理想的存储技术,用于临时“备份”用户表单值、在输入时将输入保存到 SessionStorage 以及在页面加载时恢复(如果存在),以进一步帮助用户从浏览器崩溃或意外页面刷新中恢复(尽管浏览器会自行执行其中的一些操作,尤其是在从崩溃中恢复时)。


3.以“隐身”模式创建的LocalStorage值是隔离的

当您在私人/隐身/安全模式(有时更粗略和准确地称为“se情模式”)下启动浏览器时,它将为 LocalStorage 值创建一个新的临时数据库。这意味着当隐私浏览会话关闭时,保存到 LocalStorage 的任何内容都将被销毁,从而使 LocalStorage 的行为更像 SessionStorage。

此外,由于浏览器的“会话恢复”功能不会重新打开私有模式会话,因此在浏览器窗口关闭后,在 SessionStorage 中创建的任何内容也将丢失。实际上,简而言之,在隐私浏览会话期间放入 Local 或 SessionStorage 的任何数据都会在浏览器窗口关闭(有意或无意)后立即丢失。


4. LocalStorage 配额不能大于 5MB

LocalStorage 不应该是 HTML5 的浏览器内存储的主要形式(IndexDB 才是),但某些应用程序可能需要LocalStorage提供不止5m的内存。有没有办法扩大 LocalStorage 配额?没有,没有的,别想了,你在想peach

但是也有个旁门左道!

从技术上讲,LocalStorage 不会阻止同一主机(使用相同的协议和端口)的子域访问他的 LocalStorage 对象。因此,一些浏览器公开了一种解决方法,即授予“a1.website.com”和“a2.website.com”它们自己的 5MB LocalStorage 配额。并且由于两个站点位于同一来源,因此它们可以访问彼此的值。(安全方面注意:这也意味着共享域上的站点,例如 apphost.com,都共享一个 HTML5 存储对象。请谨慎操作!)

因此,虽然存在技术解决方法,但HTML5 Web 存储规范中特别不赞成它。。

但到目前为止只有 Opera 实现了规范的这一部分。所以现在,5MB 是你的现实限制。


5. LocalStorage 可以填充到旧浏览器(包括 IE)中

啊,旧版浏览器(特指 乐色IE浏览器),是每个 HTML5 派对上的失败者。幸运的是,高级浏览器对 LocalStorage 的支持非常好。它在 IE8+ (!)、Firefox 3.5+ 和 Chrome 4+ 中原生可用。很少有 HTML5 规范能像 Web 存储那样得到广泛且一致的支持。

对于旧版本的 IE,polyfill 支持是可用的,这要归功于一个名为“userData”的 IE-only 功能。在 IE5 中引入 userData 是一种 IE 行为,它会打开 1MB 的本地存储。通过包装 userData API,现代 HTML5 应用程序可以处理 polyfill LocalStorage 一直到 IE6(或 IE5,技术上)。

因此,请享受简单的 LocalStorage API,但要注意可能会造成一些令人困惑的调试的内部工作原理

链接: https://fly63.com/article/detial/12204

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

HTML5新方法:前端存储localStorage的使用总汇

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

介绍web开发中实现会话跟踪的常用技术方法

由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。

关于网页本地存储的一些思考

localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

前端数据保存_使用js开发数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。

Cookie防篡改机制_cookie怎么防止被篡改/伪造

因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。

在前后端分离的项目中,ajax跨域请求怎样附带cookie

后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢

localStorage设置过期时间

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!