本地存储

解决方案很多，比如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的值------推荐

获取

清除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中.