本地存儲（cookie&sessionStorage&localStorage）

好文章，最全面。就查它吧：https://segmentfault.com/a/1190000004556040

 

一、DOM存儲:https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Storage/Storage

二、IE8+及高級瀏覽器使用localStorage，舊式IE使用userData，兼容本地存儲：https://github.com/RubyLouvre/avalon.oniui/blob/master/store/avalon.store.js

三、JSON.stringify():https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

四、DOM存儲的機制是經過存儲字符串類型的鍵/值對,因此須要要使用JSON.stringfy()將JSON轉換爲JSON字符串。不支持JSON.stringfy()的寫quote(只有firefox支持)：

五、String方法總結(quote)：http://www.cnblogs.com/darr/p/4342575.html

 

//建立一個示例數據
var session = {
    'screens' : [],
    'state' : true
};
session.screens.push({"name":"screenA","width":450,"height":250});
session.screens.push({"name":"screenB","width":650,"height":350});
session.screens.push({"name":"screenC","width":750,"height":120});
session.screens.push({"name":"screenD","width":250,"height":60});
session.screens.push({"name":"screenE","width":390,"height":120});
session.screens.push({"name":"screenF","width":1240,"height":650});
console.log(session);
// 使用 JSON.stringify 轉換爲 JSON 字符串
// 而後使用 localStorage 保存在 session 名稱裏
localStorage.setItem('session',JSON.stringify(session));
console.log(localStorage.session);
// 而後是如何轉換經過 JSON.stringify 生成的字符串，該字符串以 JSON 格式保存在 localStorage 裏
var restoredSession = JSON.parse(localStorage.getItem('session'));
// 如今 restoredSession 包含了保存在 localStorage 裏的對象
console.log(restoredSession);

面試題：https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers 請描述一下 cookies，sessionStorage 和 localStorage 的區別？ cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。 cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。 存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。 有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； (相對於整個站點或者說域名吧 保存) sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。（相對於當前窗口保存） cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉（相對於整個站點，即後端經過url帶的，和localStorage同樣）

Storage

概述

DOM存儲是一套在Web Applications 1.0 規範中首次引入的與存儲相關的特性的總稱, 如今已經分離出來,單獨發展成爲獨立的W3C Web存儲規範. DOM存儲被設計爲用來提供一個更大存儲量,更安全,更便捷的存儲方法,從而能夠代替掉將一些不須要讓服務器知道的信息存儲到cookies裏的這種傳統方法.該特性在Firefox 2 和 Safari 4中首次引入.

 

描述

DOM存儲的機制是經過存儲字符串類型的鍵/值對,來提供一種安全的存取方式.這個附加功能的目標是提供一個全面的,能夠用來建立交互式應用程序的方法(包括那些高級功能,例如能夠離線工做一段時間).

基於Mozilla的瀏覽器, Internet Explorer 8+, Safari 4+ 以及 Chrome 都提供了本身的DOM存儲規範的實現. (若是你想讓本身的代碼兼容多個瀏覽器,則你須要照顧一下老版本的IE瀏覽器,IE下有一個相似的特性,在IE8以前版本也可使用,叫作"userData behavior",它容許你在多重瀏覽器會話中永久地保存數據.)

DOM存儲頗有用，由於在瀏覽器端沒有好的方法來持久保存大量數據。瀏覽器cookie的能力有限，並且不支持組織持久數據，其餘方法（如flash本地存儲）須要外部插件支持。

 

參考

如下所提到的對象都是全局對象，做爲 window 對象 的屬性存在。這意味着能夠以 sessionStorage 或者 window.sessionStorage 的形式訪問這些對象。(這點很重要，由於可使用iframe來存儲、訪問除了直接包含在頁面的數據以外的附加數據。)

sessionStorage

sessionStorage 是個全局對象，它維護着在頁面會話(page session)期間有效的存儲空間。只要瀏覽器開着，頁面會話週期就會一直持續。當頁面從新載入(reload)或者被恢復(restores)時，頁面會話也是一直存在的。每在新標籤或者新窗口中打開一個新頁面，都會初始化一個新的會話。