在HTML5中，新加入了一个localStorage特性，这个特性紧张是用来作为本地存储来利用的，办理了cookie存储空间不敷的问题(cookie中每条cookie的存储空间为4k)，localStorage中一样平常浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
二、localStorage的上风与局限
localStorage的上风
1、localStorage拓展了cookie的4K限定
2、localStorage会可以将第一次要求的数据直接存储到本地，这个相称于一个5M大小的针对付前端页面的数据库，比较于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小分歧一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON工具类型须要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage实质上是对字符串的读取，如果存储内容多的话会花费内存空间，会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点差异便是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
这里我们以localStorage来剖析
三、localStorage的利用
localStorage的浏览器支持情形：
这里要特殊声明一下，如果是利用IE浏览器的话，那么就要UserData来作为存储，这里紧张讲解的是localStorage的内容，以是userData不做过多的阐明，而且以博主个人的意见，也是没有必要去学习UserData的利用来的，由于目前的IE6/IE7属于淘汰的位置上，而且在如今的很多页面开拓都会涉及到HTML5\CSS3等新兴的技能，以是在利用上面一样平常我们不会去对其进行兼容
首先在利用localStorage的时候，我们须要判断浏览器是否支持localStorage这个属性
if(！
window.localStorage){ alert(\"大众浏览器支持localstorage\"大众); return false; }else{ //主逻辑业务 }
localStorage的写入，localStorage的写入有三种方法，这里就逐一先容一下
if(！
window.localStorage){ alert(\"大众浏览器支持localstorage\"大众); return false; }else{ var storage=window.localStorage; //写入a字段 storage[\公众a\公众]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem(\"大众c\"大众,3); console.log(typeof storage[\"大众a\公众]); console.log(typeof storage[\"大众b\公众]); console.log(typeof storage[\公众c\公众]); }
运行后的结果如下：
这里要特殊解释一下localStorage的利用也是遵照同源策略的，以是不同的网站直接是不能共用相同的localStorage
末了在掌握台上面打印出来的结果是:
不知道各位读者有没有把稳到，刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。
localStorage的读取
if(!window.localStorage){ alert(\公众浏览器支持localstorage\"大众); }else{ var storage=window.localStorage; //写入a字段 storage[\公众a\"大众]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem(\公众c\"大众,3); console.log(typeof storage[\"大众a\"大众]); console.log(typeof storage[\公众b\公众]); console.log(typeof storage[\公众c\"大众]); //第一种方法读取 var a=storage.a; console.log(a); //第二种方法读取 var b=storage[\"大众b\"大众]; console.log(b); //第三种方法读取 var c=storage.getItem(\"大众c\公众); console.log(c); }
这里面是三种对localStorage的读取，个中官方推举的是getItem\setItem这两种方法对其进行存取，不要问我这个为什么，由于这个我也不知道
我之前说过localStorage便是相称于一个前真个数据库的东西，数据库紧张是增删查改这四个步骤，这里的读取和写入就相称于增、查的这两个步骤
下面我们就来说一说localStorage的删、改这两个步骤
改这个步骤比较好理解，思路扈从新变动全局变量的值一样，这里我们就以一个为例来大略的解释一下
if(!window.localStorage){ alert(\公众浏览器支持localstorage\"大众); }else{ var storage=window.localStorage; //写入a字段 storage[\公众a\"大众]=1; //写入b字段 storage.b=1; //写入c字段 storage.setItem(\"大众c\"大众,3); console.log(storage.a); // console.log(typeof storage[\"大众a\"大众]); // console.log(typeof storage[\公众b\"大众]); // console.log(typeof storage[\"大众c\"大众]); /分割线/ storage.a=4; console.log(storage.a); }
这个在掌握台上面我们就可以看到已经a键已经被变动为4了
localStorage的删除
1、将localStorage的所有内容打消
var storage=window.localStorage; storage.a=1; storage.setItem(\"大众c\"大众,3); console.log(storage); storage.clear(); console.log(storage);
2、 将localStorage中的某个键值对删除
var storage=window.localStorage; storage.a=1; storage.setItem(\"大众c\公众,3); console.log(storage); storage.removeItem(\公众a\公众); console.log(storage.a);
掌握台查当作果
localStorage的键获取
var storage=window.localStorage; storage.a=1; storage.setItem(\公众c\公众,3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); console.log(key); }
利用key()方法，向个中出入索引即可获取对应的键
四、localStorage其他把稳事变
一样平常我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以利用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
示例：
if(!window.localStorage){ alert(\"大众浏览器支持localstorage\"大众); }else{ var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem(\"大众data\公众,d); console.log(storage.data); }
读取之后要将JSON字符串转换成为JSON工具，利用JSON.parse()方法
var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem(\"大众data\公众,d); //将JSON字符串转换成为JSON工具输出 var json=storage.getItem(\"大众data\公众); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);
打印出来是Object工具
其余还有一点要把稳的是，其他类型读取出来也要进行转换
