客戶端存儲方式

* 客戶端存儲的三種方式

https://blog.csdn.net/ruby_xc/article/details/65939988

   　　Web應用容許使用瀏覽器提供的API實現將數據存儲到用戶的電腦上。這種客戶端存儲至關於賦予了Web瀏覽器記憶功能。比方說，Web應用就能夠用這種方式來「記住」用戶的配置信息甚至是用戶全部的狀態信息，以便準確地「回憶」起用戶上一次訪問時候的狀態。客戶端存儲遵循「同源策略」，所以不一樣站點的頁面是沒法互相讀取對方存儲數據的，而同一站點的不一樣頁面之間是能夠互相共享存儲數據的，它爲咱們提供了一種通訊機制，例如，一個頁面上填寫的表單數據能夠顯示在另一個頁面中。Web應用能夠選擇它們存儲數據的有效期：好比採用臨時存儲可讓數據保存至當前窗口關閉或者瀏覽器退出；採用永久存儲，能夠將數據永久地存儲到硬盤上，永不失效。

1. cookie

　　Cookie 是一小段文本信息，伴隨着用戶請求和頁面在 Web 服務器和瀏覽器之間傳遞，所以，不論服務器端是否須要，每一次HTTP請求都會把這些數據傳輸到服務器端。Cookie 包含每次用戶訪問站點時 Web 應用程序均可以讀取的信息。由於HTTP協議是無狀態的，對於一個瀏覽器發出的屢次請求，WEB服務器沒法區分 是否是來源於同一個瀏覽器。因此，須要額外的數據用於維護會話。

　　Cookie只是一段文本，因此它只能保存字符串。並且瀏覽器對它有大小限制以及 它會隨着每次請求被髮送到服務器，因此應該保證它不要太大。 Cookie的內容也是明文保存的，有些瀏覽器提供界面修改，因此， 不適合保存重要的或者涉及隱私的內容。大多數瀏覽器支持最大爲 4096 字節的 Cookie。因爲這限制了Cookie 的大小，最好用 Cookie 來存儲少許數據，或者存儲用戶 ID 之類的標識符。用戶 ID 隨後即可用於標識用戶，以及從數據庫或其餘數據源中讀取用戶信息。 瀏覽器還限制站點能夠在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只容許每一個站點存儲 20 個 Cookie；若是試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。有些瀏覽器還會對它們將接受的來自全部站點的 Cookie 總數做出絕對限制，一般爲 300 個。　

　　- cookie屬於document對象

　　- 在控制檯中設置cookie，獲取cookie，在Application中能夠看到cookie

　　document.cookie = "ck_hxh=jkdfkjgk;path=/";

　　$.cookie("ck_hxh");

　　好處：能夠下次刷新頁面，能夠繼續保持頁面的狀態；

　　document.cookie是獲取全部的cookie； document.cookie.split(';');經過；分隔cookie

2. web存儲

　　Web存儲最初做爲HTML5一部分被定義成API形式，可是後來被剝離出來做爲獨立的一份標準了。該標準目前還在草案階段，但其中一部份內容已經被包括IE8在內的全部主流瀏覽器實現了。Web存儲標準所描述的API包含了 localStorage 對象和 sessionStorage 對象，這兩種方式存儲的數據不會自動發給服務器，僅僅是本地保存，有大小限制。這兩個對象其實是持久化關聯數組，是名值對的映射表，「名」和「值」都是字符串。Web存儲易於使用、支持大容量（但非無限量）數據存儲同時兼容當前全部主流瀏覽器，可是不兼容早期瀏覽器。

　　localStorage是持久化的本地保存，除非主動刪除，否則會一直存在，並且在全部的同源窗口中都是能夠共享的；

　　sessionStorage是會話級別的本地保存，好比一個頁面關閉的時候該頁面設置的sessionStorage數據會自動消失，在不一樣瀏覽器窗口不會共享的，即便是同一個瀏覽器的同一個頁面。

二者擁有一些共同的方法：

window.localStorage.setItem(key,value);//設置指定key的數據（JSON格式）
window.localStorage.getItem(key);//獲取指定key的數據
window.localStorage.removeItem(key);//刪除指定key的數據
window.localStorage.clear();//清空全部的存儲數據
window.sessionStorage.setItem(key,value);
window.sessionStorage.getItem(key);
window.sessionStorage.removeItem(key);
window.sessionStorage.clear();

 

　　- 查看全部的session：window.sessionStorage;

　　- session屬於window對象

一、localStorage：沒有時間限制；跨多個窗口，持續範圍超過當前會話，瀏覽器關閉再打開數據依然是可用的。經過js刪除或用戶清除瀏覽器緩存。注意對應的是同一域名

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