各種儲存方案
cookies： 瀏覽器均支援，容量為4kb
localstorage： html5，容量為5m
sessionstorage： html5，容量為5m
userdata：僅ie支援，容量為64kb
flash：100kb，非html原生，需要外掛程式支援
google gears sqlite ：需要外掛程式支援，容量無限制
globalstorage：firefox獨有的，firefox13開始就不再支援這個方法
userdata僅ie支援， google gears sqlite需要外掛程式，flash已經伴隨著html5的出現漸漸退出了歷史舞台
cookie
cookie特點
cookie大小限制為4kb
只要有請求涉及cookie，cookie就要在伺服器與客戶端來回傳送
cookie會隨請求到伺服器，js操作cookie比較繁瑣
session
session機制是一種伺服器端的機制
cookie和session簡單對比
cookie客戶端 session 伺服器
session 占用資源
單個cookie儲存的資料不能超過4k，很多瀏覽器都限制乙個站點最多儲存20個cookie
cookie 不安全
建議： - 將登陸資訊等重要資訊存放為session
其他資訊如果需要保留，可以放在cookie中
cookie語法
讀取cookie allcookies = document.cookie;
寫入cookie document.cookie = updatedcookie;
;path=*path* (例如 '/', '/mydir') 如果沒有定義，預設為當前文件位置的路徑。
;domain=*domain* (例如 'example.com'， '.example.com' (包括所有子網域名稱), 'subdomain.example.com') 如果沒有定義，預設為當前文件位置的路徑的網域名稱部分。
;max-age=*max-age-in-seconds* (例如一年為606024*365)
;expires=*date-in-gmtstring-format* 如果沒有定義，cookie會在對話結束時過期這個值的格式參見date.toutcstring()
;secure (cookie只通過https協議傳輸)
mdn doccookies.js
var doccookies = ,
setitem: function (skey, svalue, vend, spath, sdomain, bsecure)
var ***pires = "";
if (vend)
}document.cookie = encodeuricomponent(skey) + "=" + encodeuricomponent(svalue) + ***pires + (sdomain ? "; domain=" + sdomain : "") + (spath ? "; path=" + spath : "") + (bsecure ? "; secure" : "");
return true;
},removeitem: function (skey, spath, sdomain)
document.cookie = encodeuricomponent(skey) + "=; expires=thu, 01 jan 1970 00:00:00 gmt" + ( sdomain ? "; domain=" + sdomain : "") + ( spath ? "; path=" + spath : "");
return true;
},hasitem: function (skey) ,
keys: /* optional method: you can safely remove it! */ function ()
return akeys;}};
doccookies.setitem(name, value[, end[, path[, domain[, secure]]]])寫入cookie
doccookies.getitem(name)得到cookie
doccookies.removeitem(name[, path],domain)移除cookie
doccookies.hasitem(name)檢查cookie
doccookies.keys()得到所有cookie的列表 mdn鏈結 npm鏈結
localstorage
這是一種持久化的儲存方式，也就是說如果不手動清除，資料就永遠不會過期。 它也是採用key - value的方式儲存資料，底層資料介面是sqlite，按網域名稱將資料分別儲存到對應資料庫檔案裡。它能儲存更大的資料（ie8上是10mb，chrome是5mb），同時儲存的資料不會再傳送給伺服器，避免頻寬浪費。
localstorage的屬性與方法
屬性方法 說明
localstorage.length 獲得storage中的個數
localstorage.key(n) 獲得storage中第n個元素對的鍵值（第乙個元素是0）
localstorage.key 獲取鍵值key對應的值
localstorage.getitem(key) 獲取鍵值key對應的值
localstorage.setitem(key, value) 新增資料，鍵值為key，值為value
localstorage.removeitem(key) 移除鍵值為key的資料
localstorage.clear() 清除所有資料
var arrdisplay = [0, 1, 1, 1];
localstorage.setitem("menutitle", arrdisplay);
localstorage.getitem("menutitle");
localstorage.clear()
localstorage缺點
localstorage大小限制在500萬字元左右，各個瀏覽器不一致
localstorage在隱私模式下不可讀取
localstorage本質是在讀寫檔案，資料多的話會比較卡（firefox會一次性將資料匯入記憶體，想想就覺得嚇人啊）
localstorage不能被爬蟲爬取，不要用它完全取代url傳參
sessionstorage
和伺服器端使用的session類似，是一種會話級別的快取，關閉瀏覽器會資料會被清除。不過有點特別的是它的作用域是視窗級別的，也就是說不同視窗間的sessionstorage資料不能共享的。使用方法（和localstorage完全相同）
sessionstorage和localstorage的區別
sessionstorage用於本地儲存乙個會話（session）中的資料，這些資料只有在同乙個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionstorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。當使用者關閉瀏覽器視窗後，資料立馬會被刪除。
localstorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。第二天、第二週或下一年之後，資料依然可用。
web storage和cookie的區別
web storage 有更大的儲存
web storage 使用更簡單
cookie也是不可以或缺的：cookie的作用是與伺服器進行互動，作為http規範的一部分而存在 ，而web storage僅僅是為了在本地「儲存」資料而生
JS 本地儲存
隨著網際網路的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地儲存大量的資料，html5規範提出了相關解決方案。1 資料儲存在使用者瀏覽器中 2 設定 讀取方便 甚至頁面重新整理不丟失資料 3 容量較大，sessionstorage約5m locals...
js 本地儲存 物件儲存
使用getitem 和setitem 來取資料和存資料 localstorage.setitem data item 設定data為 item localstorage.getitem data 獲取data的值 html5還提供了乙個key 方法，可以在不知道有哪些鍵值的時候使用var stora...
JS本地儲存 localStorage
localstorage會可以將第一次請求的資料直接儲存到本地，這個相當於乙個5m大小的針對於前端頁面的資料庫 注意 在ie8以上的ie版本才支援localstorage這個屬性。localstorage屬於永久性儲存，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡。1.localstorage...