1. 本地存儲
Cookie（局限性）：用戶可以禁用cookie，最多只能存儲4kb，cookie有過期時間的（一般我們設置的時間最長1個月，用戶使用殺毒軟件也可以清除我們的cookie）
LocalStorage：持久化存儲到本地，沒有過期時間，最大可存儲5MB
都是采用的明文存儲，我們在控制台（Resource）下可以看到存儲的信息，所以本地存儲都是不安全的（不要存儲重要的信息，如果需要的話，我們需要對重要的信息進行嚴格的加密—md5加密）
WebStorage(localStorage(常用，sessionStorage))
由於我們的localStorage可以存儲很多的數據，我們在項目中把不經常更新的數據進行存儲，下一次打開頁面，先把本地緩存的數據展示，減少對於服務器的請求壓力---移動端的本地緩存
$("#productCouponList tr").each(function() {
if ($(this).find('input').is(':checked')) {
var Id = $(this).attr('data-id');
var Name = $(this).attr('data-name');
var Category = $(this).attr('data-category');
var item = {
id: Id,
name: Name,
category: Category
};
VoucherList.push(item);
var jsonVoucherStr = JSON.stringify(VoucherList);
sessionStorage.setItem("VoucherList", jsonVoucherStr);
var VoucherValue = sessionStorage.getItem("VoucherList")
var VoucherObj = JSON.parse(VoucherValue);
$("#speCouponList").html("");
var template = $("#speCouponListTemplate").html();
var datalist = dataHelper.setJson(null, 'lists', VoucherObj);
Mustache.parse(template);
var render = Mustache.render(template, jQuery.parseJSON(datalist));
$("#speCouponList").append(render);
}
});
備注知識點：
1、JSON.parse()用於從一個字符串中解析出json對象
2、JSON.stringify()用於從一個對象解析成字符串
3、jQuery.parseJSON(jsonString) : 將格式完好的JSON字符串轉為與之對應的JavaScript對象
4、JSON.parse()和jQuery.parseJSON()的區別：
有的瀏覽器不支持JSON.parse()方法，使用jQuery.parseJSON()方法時，在瀏覽器支持時會返回執行JSON.parse()方法的結果，否則會返回類似執行eval()方法的結果。
http://blog.csdn.net/oaa608868/article/details/53539954
http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生（來自@otakustay 的糾正）
html5 web storage的瀏覽器支持情況
瀏覽器的支持除了IE７及以下不支持外，其他標准瀏覽器都完全支持(ie及FF需在web服務器里運行)，值得一提的是IE總是辦好事，例如IE7、IE6中的UserData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage。
要判斷瀏覽器是否支持localStorage可以使用下面的代碼：
if(window.localStorage){ alert("瀏覽支持localStorage") }else{ alert("瀏覽暫不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("瀏覽暫不支持localStorage") }
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;} }
storage事件對象的具體屬性如下表：
| Property | Type | Description |
| key | String | The named key that was added, removed, or moddified |
| oldValue | Any | The previous value(now overwritten), or null if a new item was added |
| newValue | Any | The new value, or null if an item was added |
| url/uri | String | The page that called the method that triggered this change |
前言：
因最近移動端開發過程中遇到一個運營提出的所謂技術難點需求，對於原生APP來說輕而易舉，畢竟自己的APP用戶操作指哪打哪，但是H5該怎么做?H5就實現不了么？對於一個愛研究攻克這些前端棘手問題的我來說，我沒嘗試過，我是拒絕對提出需求者說實現不了，做不到之類的。
是什么需求呢？--需求方要求用戶在一個列表頁瀏覽時，點擊一個列表進入詳情頁，返回要求記錄用戶剛剛瀏覽的位置，而不是重新刷新頁面到了頁面頂部。（ps：如果用戶好不容易翻到了第幾十、幾百乃至幾千條時，難道要用戶再重頭開始？可能這個時候跳出率就高了，這個分析的確挺有道理，無力反駁...）。
那么開始腦洞大開了，當時腦子里出來各種解決方案：
1、將瀏覽時的滾動位置存到cookie里，進到這個頁面再取。那多久銷毀呢？好像不靈活...pass
2、將詳情頁通過ifram或者彈框方式引到當前頁，通過操作關閉當前彈窗（那么在已經完成的頁面上再重構，加操作按鈕？那么加載效率和體驗呢？...反正不看好）
3、將瀏覽時的滾動位置傳到服務器端，加載頁面時，根據用戶來取最后瀏覽的位置，各種參數傳來調去（跟方案一很類似）
4、通過H5本地存儲的方式將數據存起來，需要時取值（沒啥經驗，先研究一下吧，好像挺靠譜）
接下來先了解一下什么是本地存儲吧!
- 簡介：
HTML5 web 存儲,一個比cookie更好的本地存儲方式。
首先我們先了解一下：
什么是 HTML5 Web 存儲?
使用HTML5可以在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.
數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。
localStorage 和 sessionStorage
客戶端存儲數據的兩個對象為：
- localStorage - 沒有時間限制的數據存儲
- sessionStorage - 針對一個 session 的數據存儲（關閉窗口，存儲的數據清空）
了解完sessionStorage之后是不是很符合我們的需求呢？將數據存到 session中，管你前進后退還是刷新，數據依然在，關閉窗口后再進頁面才會清空數據，那么完全符合需求啊，看到這玩意簡直激動快要淚奔了！！！
再理一下實現思路，①頁面滾動，將滾動位置存到session中 → ②再次進到頁面中，到session中取出上次保存的瀏覽位置 → ③滾動到對應位置
這家伙簡直好玩到嗷嗷叫啊，睜大眼睛看重點咯！
這里只介紹setItem和getItem，當然還有什么removeItem刪除key、clear清除所有的key/value操作。
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");
//滾動時保存滾動位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滾動位置
} });
//onload時，取出並滾動到上次保存位置
window.onload = function()
{
var _offset = sessionStorage.getItem("offsetTop");
$(document).scrollTop(offsetTop);
};