JavaScript本地存储实践localStorage

本地存储

解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。

缓存方案	特点	限制
Cookie	在web中得到广泛应用，但局限性非常明显，容量太小， 有些站点会因为出于安全的考虑而禁用cookie，cookie没有想象中的那么安全， Cookie 的内容会随着页面请求一并发往服务器。	① cookie大小限制在4k左右，不适合存业务数据 ② cookie每次随HTTP事务一起发送，浪费带宽
User Data	是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合
Google Gears	Google的离线方案，已经停止更新，官方推荐使用html5的localStorage方案。
localStorage	相对于上述本地存储方案，localStorage有自身的优点：容量大（5MB）、易用、强大、原生支持；缺点是兼容性差些（chrome,  safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以请勿使用localStorage保存敏感信息）	① localstorage大小限制在500万字符左右，各个浏览器不一致 ② localstorage在隐私模式下不可读取 ③ localstorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊） ④ localstorage不能被爬虫爬取，不要用它完全取代URL传参 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

localstorage的限制

localStorage是HTML5新增的方法，它允许JavaScript在用户计算机硬盘上永久储存数据（除非用户主动删除）。

但localStorage也有一些限制：

首先是localStorage和Cookies类似，都有域的限制，运行在不同域的JavaScript无法调用其他域localStorage的数据；

其次是单个域在localStorage中存储数据的大小通常有限制（虽然W3C没有给出限制），对于Chrome这个限制是5MB；

最后localStorage只能储存字符串型的数据，无法保存数组和对象，但可以通过join、toString和JSON.stringify等方法先转换成字符串再储存。

localStorage

localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输。

使用场景

（1）需要缓存的数据比较大

（2）数据具有过期时间

分类

localstorage存储对象分为两种：

① sessionStrage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长---临时保存。

② localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在--长久保存。

例子：

sessionStorage.getItem('msg');
localStorage.getItem('msg');

使用

命令	作用
localStorage.getItem(key):获取指定key本地存储的值 localStorage.setItem(key,value)：将value存储到key字段 localStorage.removeItem(key):删除指定key本地存储的值
localStorage.clear():用户或代码触发清空操作,等同于浏览器中清空缓存
if(window.localStorage){  alert('This browser supports localStorage'); }else{  alert('This browser does NOT support localStorage'); }	检测浏览器是否支持本地存储
localStorage.a = 3;//设置a为"3" localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值 localStorage.setItem("b","isaac");//设置b为"isaac"-----推荐	设置
var a1 = localStorage["a"];//获取a的值 var a2 = localStorage.a;//获取a的值 var b = localStorage.getItem("b");//获取b的值------推荐	获取
localStorage.removeItem("c");//清除c的值-------推荐	清除
var storage = window.localStorage; function showStorage(){  for(var i=0;i<storage.length;i++){   //key(i)获得相应的键，再用getItem()方法获得对应的值   document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");  } }	获取所有keys

1） localStorage存储的值都是字符串类型，在处理复杂的数据时，比如json数据时，需要借助JSON类，将json字符串转换成真正可用的json格式

2）localStorage还提供了一个storage事件，在存储的值改变后触发

3）过期时间概念

localSorage不能设置过期时间。要实现数据过期，如果确实有这个需求，可以自己写代码实现。

4） 数字做索引
localStorage[5]="test5";
console.log(localStorage[5]);
在除了firefox之外的浏览器中都会输出”test5″,但是在firefox里会报错
解决：
事实上在设置值的时候firefox中可以使用数字索引的方式来设置,只是在获取的时候就不可以了,所以代码写成这样的时候就正常了:

localStorage[5]="test5";
console.log(localStorage.getItem(5));

5） 不存在的索引处理
onsole.log(localStorage['dsfd']);
事实上每个浏览器的处理方式并不相同,结果在开始的图表里已经有了:firefox返回null,其他浏览器返回undefined.
还有一种情况,如果用getItem去获取的话,情况又变得不一样了:
console.log(localStorage.getItem("fdf"));
使用getItem的时候,chrome和firefox都会返回null,其他浏览器返回undefined
6） 
1.sessionStorage是一个跟浏览器生命周期相同的本地存储,在页面刷新后保持之前输入的数据的场景下特别有效.
2.可以用localStorage.clear()方法彻底清除localStorage.
3.localStorage对于每个域都有5兆的存储空间,而且对于存储数据条数也有不同的限制.
4.localStorage只能存储文本数据.如果你想存储图像,那也不是不可能的,可以用canvas将图片转换成dataurl的形式,然后存储起来.
5.请关注localStorage的存储性能,在某些浏览器中存取数据非常慢,例如opera中.

参考

http://www.iteye.com/topic/1066239

http://www.css88.com/archives/3717

http://www.cnblogs.com/yexiaochai/p/4509472.html

http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html