HTML5本地存储

1、sessionStorage和localStorage

一、html5的Web Storage包括了两种存储方式：sessionStorage和localStorage。

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

1. 经过sessionStorage所存储数据的生命周期，和Session相似，关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
2. session storage每一个窗口的值都是独立的（每一个窗口都有本身的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不能够共享的。

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

1. local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样作）。
2. 并且对于某一个域下来讲，local storage是共享的（多个窗口共享一个“数据库”）。
3. localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

2、web storage和cookie的区别

Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，cookie的存储限制在了4k以内，而且每次你请求一个Cookie 的内容会随着页面请求一并发往服务器。，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。

除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。

可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

3、判断浏览器是否支持LocalStorage，SessionStorage

if(window.localStorage){     
  alert("浏览支持localStorage") 
}else{  
  alert("浏览暂不支持localStorage") 
}

或者

if(typeof window.localStorage == 'undefined')
{ 	alert("浏览暂不支持localStorage") }

换为window.sessionStorage一样

4、经常使用方法

window.sessionStorage.name = 'rainman';           // 赋值
window.sessionStorage.setItem('name','cnblogs');  // 赋值
window.sessionStorage.getItem('name');            // 取值
window.sessionStorage.removeItem('name');         // 移除值
window.sessionStorage.clear();                    // 删除全部sessionStorage

1. setItem中的key、value使用的是字符串的形式进行存储的。也就是说若是有以下的代码：setItem(‘count’, 1);经过getItem(‘count’) + 5 获得的将不是预期的6(整数)，而是’16’(字符串)。
2. 再次使用setItem设置已经存在的key的value时，新的值将替代旧的值。

5、LocalStorage应用举例 

//结合JSON.stringify使用更强大
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
JSON.parse(localStorage.getItem('me')).name;	// 'rainman'

/**
 * JSON.stringify，将JSON数据转化为字符串
 *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'
 *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]'
 * JSON.parse，反解JSON.stringify
 *     JSON.parse('["a","b","c"]')                    // ["a","b","c"]
 */

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只能存储字符串的数据，对于JS中经常使用的数组或对象却不能直接存储。

但咱们能够经过JSON对象提供的parse和stringify将其余数据类型转化成字符串，再存储到storage中就能够了。请看下面的代码。

var obj = { name:'Jim' }; 
var str = JSON.stringify(obj); 

//存入 
sessionStorage.obj = str; 
//读取 
str = sessionStorage.obj; 
//从新转换为对象 
obj = JSON.parse(str);

 

在localStorage中存储对象数组并读取

频繁ajax请求致使页面响应变慢。 
因而考虑将数据存储在window.storage中，这样只请求一次ajax，而不须要频繁请求。 
鉴于localstorage中只能存储字符串，因此咱们要借助于JSON.stringify()和JSON.parse();

$.ajax({
    type: "get",
    async: "true",
    url: "",
    data: {},
    dataType: "jsonp",
    success: function(data){
        if(data instanceof Array){
            stroage.push(JSON.stringify(data[i])); //storage是外部定义的数组  storage = []
        }
    },
    error: function(){
    }
});

如今，咱们将data存储在了storage中，当咱们须要使用时:

fucntion getData(){
    window.localStorage.job = JSON.stringify(storage); //将storage转变为字符串存储
    var job = JSON.parse(window.localStorage.job);
    for(var i = 0; i < job.length; i++){
        job[i] = JSON.parse(job[i]);
    }
    //此时job中存储的就是对象数组了
}

参考连接http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html#m0

http://blog.csdn.net/liuyan19891230/article/details/52638408