js LocalStorage

首先说一下LocalStorage和SessionStorage

LocalStorage

• 是对Cookie的优化
• 没有时间限制的数据存储
• 在隐私模式下不可读取
• 大小限制在500万字符左右，各个浏览器不一致
• 在所有同源窗口中都是共享的
• 本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存）
• 不能被爬虫爬取，不要用它完全取代URL传参
• IE７及以下不支持外，其他标准浏览器都完全支持

SessionStorage

• 针对一个 session 的数据存储
• 大小限制在5M左右，各个浏览器不一致
• 仅在当前浏览器窗口关闭前有效（适合会话验证）
• 不在不同的浏览器窗口中共享，即使是同一个页面

---

JQ下的操作方法

• 获取键值：localStorage.getItem(“key”)
• 设置键值：localStorage.setItem(“key”,”value”)
• 清除键值：localStorage.removeItem(“key”)
• 清除所有键值：localStorage.clear()
• 获取键值2：localStorage.keyName
• 设置键值2：localStorage.keyName = “value”

JS下的操作方法（JS方法前加”window.”）

• 获取键值：window.localStorage.getItem(“key”)
• 设置键值：window.localStorage.setItem(“key”,”value”)
• 清除键值：window.localStorage.removeItem(“key”)
• 清除所有键值：window.localStorage.clear()
• 获取键值2：window.localStorage.keyName
• 设置键值2：window.localStorage.keyName = “value”

注：typeOf(localStorage.keyName)可与”undefined”进行判断该键值是否已存在

 

localStorage和sessionStorage功能

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

setItem存储value

用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：

sessionStorage.setItem("key", "value"); 	
localStorage.setItem("site", "js8.in");

getItem获取value

用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：

var value = sessionStorage.getItem("key"); 	
var site = localStorage.getItem("site");

removeItem删除key

用途：删除指定key本地存储的值
用法：.removeItem(key)
代码示例：

sessionStorage.removeItem("key"); 	
localStorage.removeItem("site");

clear清除所有的key/value

用途：清除所有的key/value
用法：.clear()
代码示例：

sessionStorage.clear(); 	
localStorage.clear();

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage; 
storage.key1 = "hello"; 
storage["key2"] = "world"; 
console.log(storage.key1); 
console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){     
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); }

storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);}
else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);} 
function handle_storage(e){ 	
    if(!e){e=window.event;}}



原文链接
http://blog.csdn.net/djzhao627/article/details/50747628
http://www.cnblogs.com/chencheng365/p/4361868.html