html5 webstorage,js的localStorage存储标签
说到本地存储，这个东西真的是历尽千辛万苦才到HTML5的。之前的历史大概如下图所示：
最早的Cookies自然大家都知道，但主要问题是太小了，大概4KB左右。而且IE6每个域名只支持20个cookies，太少了。好处是大家都支持，支持度挺好的。很久以前禁用cookies的用户也慢慢消失了，就像之前禁用javascript的用户不存在一样。
UserData是IE的东西，垃圾。现在用的最多的是Flash。空间是Cookie的25倍，基本够用。然后谷歌推出了Gears。虽然没有限制，但不愉快的是还得安装额外的插件(具体的还没研究过)。到了HTML5，这些都统一了。官方建议是每个网站5MB，很大。省点弦就行了，够了。奇怪的是目前所有支持的浏览器都用5MB。虽然有些浏览器可以由用户设置，但目前网页制作者考虑5MB更合适。
如上图，IE 8.0就支持了，很意外。但是需要注意的是，在测试IE和Firefox时，需要将文件上传到服务器(或者本地主机)，直接点击本地的HTML文件，这是不可以的。
自然，第一步是检查浏览器是否支持本地存储。在HTML5中，localStorage是一个窗口的属性，包括local storage和sessionStorage。从名字上应该很清楚，两者的区别在于前者始终存在于本地，而后者只是伴随着session。窗户一关，就没了。这两种方法的用法完全相同。这里以localStorage为例。
if(window.localStorage){ alert(此浏览器支持local storage )；}else{ alert(此浏览器不支持local storage )；}存储数据的方式是直接给window.localStorage添加一个属性，例如：window.localStorage.a或者window.localStorage[a]。它的读、写、删除操作方法非常简单，以键值对的形式存在，如下：
local storage . a=3；//将A设置为 3 local storage[ A ]= sfsf ；//将A设置为 sfsf ，覆盖上面的值localstorage.setItem (B ， is AAC )；//将b设置为 is AAC var a1=local storage[ a ]；//获取一个var的值a2=localStorage.a//获取一个var b=localStorage.getItem(b )的值；//获取b，localStorage.removeItem(c )的值；//清除C的值，这里最推荐getItem()和setItem()。removeItem()用于清除键值对。如果想一次清除所有的键值对，可以使用clear()。此外，HTML5还提供了key()方法，可以在键值未知时使用，如下所示：
var storage=window . local storage；函数show storage(){ for(var I=0；istorage.lengthI ){ //key(i)获取对应的key，然后用getItem()方法获取对应的值document . write(storage . key(I): storage . getItem(storage . key(I)) br )；}}使用本地存储编写最简单的计数器：
var storage=window . local storage；如果(！storage . getitem( pageLoadCount ))storage . setitem( pageLoadCount ，0)；storage . pageLoadCount=parse int(storage . getitem( pageLoadCount ))1；//文档的格式；getElementByidx _ x( count )；innerHTML=存储；必须转换pageloadcountshow storage()；不断刷新可以看到数字上升了一点，如下图所示：
需要注意的是，HTML5本地存储只能存储字符串，以任何格式存储都会自动转换成字符串。所以在阅读的时候，需要自己转换类型。这就是为什么前面的代码中必须使用parseInt。
此外，在iPhone/iPad上设置setItem()时，有时会出现奇怪的QUOTA_EXCEEDED_ERR错误。这时，在setItem之前移除Item setItem()就可以了。
HTML5的本地存储还提供了一个存储事件，可以监控键值对的变化。使用方法如下：
如果(窗口。addevent listener){ window。addevent侦听器( storage ，handle_storage，false)；} else if(窗口。附加事件){ window。附加事件( on storage ，handle _ storage)；}函数handle_storage(e){ if(！e){ e=窗口。事件；}//显示storage()；}对于事件变量e，是一个存储事件对象，提供了一些实用的属性，可以很好的观察键值对的变化，如下表：
财产
类型
描述
键
线
添加、删除或修改的命名密钥
旧值
任何的
以前的值（现在已被覆盖),如果添加了新项，则为空
新价值
任何的
新值，如果添加了项，则为空
url/uri
线
调用触发此更改的方法的页面
这里添加两个键值对a和b，并增加一个按钮。给a设置固定的值，当点击按钮时，修改b的值：
身体您已查看此页面span id=count0/span次/ppinput type= button value= change storage onClick= changeS()//pscriptvar storage=window。本地存储；如果(!存储。getitem( pageLoadCount ))存储。setitem( pageLoadCount ，0)；存储。pageLoadCount=parse int(storage。getitem( pageLoadCount ))1；//必须格式转换文档。getelementbyidx _ x( count ).innerHTML=存储。pageloadcount显示存储()；如果(窗口。addevent listener){ window。addevent侦听器( storage ，handle_storage，false)；} else if(窗口。附加事件){ window。附加事件( on storage ，handle _ storage)；}函数handle_storage(e){ if(！e){ e=窗口。事件；}显示对象(e)；}函数showObject(obj){ //递归显示对象如果(！obj){ return；} for(var I in obj){ if(type of(obj[I])！= object obj[I]==null){ document。写(I): obj[I] br/)；} else {文档。write(I):object br/)；} }}storage.setItem(a ，5)；函数变化(){ //修改一个键值，测试仓库事件如果(!存储。getitem( b ){ storage。setitem( b ，0)；} storage.setItem(b ，parse int(storage。getitem( b ))1)；}函数showStorage(){ //循环显示本地存储里的键值对for(var I=0；istorage.lengthi ){ //key(i)获得相应的键，再用getItem()方法获得对应的值文档。写(存储。密钥(I)“:”存储。getitem(存储。key(I)) br )；} }/脚本/正文测试发现，目前浏览器对这个支持不太好，仅苹果平板电脑和火狐浏览器支持，而且火狐浏览器支持得乱糟糟，e对象根本没有那些属性iPad .支持非常好，用的是e.uri(不是网址),台式机上的旅行队不行，诡异。
目前浏览器都带有很好的开发者调试功能，下面分别是铬和火狐浏览器的调试工具查看本地存储：
另外，目前爪哇岛描述语言使用非常多的数据格式，如果希望存储在本地，可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为数据格式，如下所示：
var details={author:isaac ， description : fresh ggs ， rating :100 }；storage.setItem(details ，JSON。stringify(详细信息))；详情=JSON。解析(存储。getitem( details )；
支持localStorage的浏览器基本上都支持JSON对象。需要注意的是，IE8支持JSON，但是如果加上下面的兼容模式代码，切换到IE7模式就不行了(此时仍然支持localStorage。虽然window.localStorage显示为[object]而不是之前的[object Storage]，但是测试发现getItem()、setItem()等。都可以用)。
meta content= IE=7 http-equiv= X-UA兼容/
这就是本文的全部内容。希望这篇文章的内容能给你的学习或者工作带来一些帮助~有问题可以留言交流。谢谢大家的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。