localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。
这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。
localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。
很遗憾，localstorage原生是不支持设置过期时间的，想要设置的话，就只能自己来封装一层逻辑来实现：
function set(key,value){
var curtime = new Date().getTime();//获取当前时间
localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
function get(key,exp)//exp是设置的过期时间
{
var val = localStorage.getItem(key);//获取存储的元素
var dataobj = JSON.parse(val);//解析出json对象
if(new Date().getTime() - dataobj.time > exp)//如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
{
console.log("expires");//提示过期
}
else{
console.log("val="+dataobj.val);
}
}
容量限制
目前业界基本上统一为5M，已经比cookies的4K要大很多了，省着点用吧骚年。
域名限制
由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。
异常处理
localstorage在目前的浏览器环境来说，还不是完全稳定的，可能会出现各种各样的bug，一定要考虑好异常处理。我个人认为localstorage只是资源本地化的一种优化手段，不能因为使用localstorage就降低了程序的可用性，那种只是在console里输出点错误信息的异常处理我是绝对反对的。localstorage的异常处理一般用try/catch来捕获/处理异常。
如何测试用户当前浏览器是否支持localstorage
目前普遍的做法是检测window.localStorage是否存在，但某些浏览器存在bug，虽然"支持"localstorage，但在实际过程中甚至可能出现无法setItem()这样的低级bug。因此我建议，可以通过在try/catch结构里set/get一个测试数据有无出现异常来判断该浏览器是否支持localstorage，当然测试完后记得删掉测试数据哦。
浏览器兼容性
Feature
Chrome
Firefox
Internet Explorer
Opera
Safari
Android
Opera Mobile
Safari Mobile
localStorage
4
3.5
8
10.50
4
2.1
11
iOS 3.2
sessionStorage
5
2
8
10.50
4
2.1
11
iOS 3.2
如何调试
在chrome开发者工具里的Resources - Local Storage面板以及Resources - Session Storage面板里，可以看到当前域名下的localstorage数据。
![]()
在ios设备上无法重复setItem()
另外，在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误，这时一般在setItem之前，先removeItem()就ok了。
相关插件推荐
参考文章
原文链接：https://segmentfault.com/a/1190000004121465
HTML5中的localStorage是如何工作的？我搜索了每个地方(甚至在SO中)以找到localStorage的实际内部逻辑，但我最终访问了一些使用localStorage的示例。我没有找到任何有用的问题答案。有人可以给我发一个链接或解释一下localStorage的工作原理吗 最佳答案 我不一定确定您在这里寻找什么...但是localStorage的内部实现将是特定于浏览器的。我不会指望任何两个浏览器在内部以相同的方式实现该功能(就像所有东西一样，实现和性能会给每个浏览器带来不同的优势)。如果您真的很感兴趣，我建议您下载Chr
我创建了一个JS文件，并将其放置在我以外的其他网页中。所以我的是domain-1.com，我把它放到domain-2.com和domain-3.com这个JS包含jsonp，我成功地将一些数据从他们的页面保存到我的数据库中。此外，我创建了一些cookie并将值保存到本地存储。问题是，当访问者访问domain-2.com并且明天访问www.domain-2.com时，他们将具有不同的值，因为os是www.我希望这个值在整个www.与否，也许同时，我不知道一个适用的想法。我最好同时为www传递值。并且没有www.如何做到这一点？我只给他们提供一个JS外部链接。如果我也放置一个iframe就
我遇到缓存对象与正确数据不相似的问题，所以我想我可以将最新版本推送到浏览器缓存，这将解决我的问题。如何使用新对象更新localStorage？因此，如果我有一个Controller，它会更新评估。我怎样才能将该评估对象推送到localStorage？ 最佳答案 要使用原生JavaScript做到这一点，您需要执行如下操作:localStorage.setItem('itemKey',JSON.stringify(yourObject));varitem=JSON.parse(localStorage.getItem('itemKey
01.H5与小程序介绍H5概述H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。H5之所以能引发如此广泛的效应，根本在于它不再只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多酷炫而且重要的功能，并使这些应用标准化和开放化，从而使互联
自从最新版本的JSDom以来，我无法再模拟localStorage。我试过以下方法:Object.defineProperty(window,'localStorage',{value:LocalStorageMock})window.localStorage=LocalStorageMock;jest.spyOn(window.localStorage,'setItem')任何这些方法都不适合我，我总是得到原始的localStorage。 最佳答案 setItemSpy=jest.spyOn(Storage.prototype,'
我计划在我的一个项目中使用持久性localStorage，我发现大小限制为5MB(chrome)。我搜索了其他实现相同功能的框架，例如Mootools、Dojo、Lawnchair，但我找不到它们的大小限制。有谁知道这些文件的大小限制是多少。如果不是上面已经提到的选项，还有哪些我可以使用的其他选项。 最佳答案 localstorage限制与javascript框架无关，而是与您使用的浏览器相关。Currentlyspecsaresuggestingtolimitthestoragespaceto5MB这是现代浏览器上可用的最大空间在
我正在尝试做的事情:在localStorage之上创建我自己的存储API，以便在我自己的代码中更容易使用。为什么？所以它有一个API供我使用，以后可以扩展。系统:Chrome版本:版本22.0.1229.94mJSFiddle:http://jsfiddle.net/ttback/kr88W/错误fiddle将在控制台中触发错误:TypeError:对象的属性'localStorageSave'#不是函数这适用于IE8和Firefox16.0.1，所以我想知道我是否遗漏了什么或者是Chrome错误。代码:JSfunctionnotworkinginChromevarlocalStora
原来我的localStorage["items"]将我的JSON存储为字符串。"["{\"itemId\":1,\"itemName\":\"item1\"}","{\"itemId\":2,\"itemName\":\"item2\"}","{\"\":3,\"itemName\":\"item3\"}",]"这是我JSON.parse(localStorage["items"])时的样子:["{"itemId":1,"itemName":"item1"}","{"itemId":2,"itemName":"item2"}""{"itemId":3,"itemName":"item3
我在使用从本地存储中的数组获取数据的组件时遇到问题。它在页面加载时获取初始数据，但是当localstorage更改时如何更新？importReact,{Component}from'react';classMovieListextendsComponent{constructor(props){super(props)this.state={filmList:[]}}componentWillMount(){varfilm=[],keys=Object.keys(localStorage),i=keys.length;while(i--){film.push(localStorage.
我正在寻找一种方法来中断任何localStorage更改。我发现有一些神秘的条目，我不知道它们来自哪里，我希望调试器中断任何更改，以便我可以检查代码。这包括:localStorage.someKey=someValue;localStorage["someKey"]=someValue;localStorage.setItem("someKey",someValue);因为有很多方法可以改变/创建localStorage中的条目，简单地覆盖.setItem并执行debugger;是行不通的。任何想法表示赞赏。 最佳答案 不是在原生l
