jquery訪問瀏覽器本地存儲cookie，localStorage和sessionStorage

前言：cookie，localStorage和sessionStorage都是瀏覽器本地存儲數據的地方，其用法不盡相同；總結一下基本的用法。

---

1、cookie

1. 定義：
   • 存儲在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗帶寬；
   • 可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，存在有效的時間。

2. 注意點：

   • cookie的訪問須要服務器環境，直接在本地文件訪問無效；
   • cookie的訪問和設置須要導入jquery.cookie.js文件；
   • 瀏覽器對每個訪問的地址下可添加的cookie是有限制的；同時每一個瀏覽器可添加的cookie個數也存在限制。
3. 做用：
   • 儲存用戶的痕跡信息，如用戶名，ID號，密碼等，是服務器腳本發送給瀏覽器的加密數據，便於下次訪問時用戶能夠直接登陸等；

4. 運用代碼

//訪問cookie，mycolor表明鍵
var $cook = $.cookie("mycolor");


//設置cookie
$.cookie("mycolor", "red"});
$.cookie("mycolor", "red", { expires: 7, path: '/' });//增長了有效時間和訪問路徑

//刪除cookie,傳遞null值
$.cookie("mycolor", null});

說明：

1. 'mycolor'參數至關於cookie存儲數據的鍵，即數據的名字，經過名字訪問；
2. cookie的設置有三個參數，第一爲設置數據的鍵，第二個爲設置數據的值，expires表示有效時間，單位爲天，path爲訪問路徑，"/"表示當前文件路徑，在網站中表示根目錄。

注意：若是不設置路徑，默認狀況下只有設置cookie的網頁才能夠訪問此cookie；若是想網站的網頁能夠共享cookie，將路徑設爲根目錄。

注意：cookie就至關於一個能存儲數據的微型本地數據庫，"mycolor"至關於每條數據的key。

2、localStorage

1. 定義：一個本地的小型數據文件

   • 存儲在本地，容量爲5M或者更大，不會在請求時候攜帶傳遞；
   • 數據在全部同源窗口中共享，一直有效，除非人爲刪除，可做爲長期數據。

2. 注意點：

   • localStorage數據不須要依賴服務器環境訪問，能夠直接在本地文件訪問；
   • 不須要額外的文件支持。
   • 同源窗口指的是同一個域名下或者是index.html所在的文件夾下的文件路徑。

3. 代碼運用

//設置：
localStorage.setItem("mycolor", "456");
localStorage.mycolor= '456';

//獲取：
var $color = localStorage.getItem("mycolor");
var $color = localStorage.mycolor

var $color = localStorage.key(0);//獲取第一個鍵，按角標獲取
var $color = localStorage.key("");//獲取最後一個鍵

var $length = localStorage.length;//獲取數據的長度

//刪除
localStorage.removeItem("mycolor");

//清空
localStorage.clear();//將全部保存的數據刪除

說明：

1. 設置數據格式相似鍵值對，"mycolor"表明key,"456"表明值。
2. 數據是有排序的，後加入的角標靠前，最後加入的角標爲0.

注意：localStorage至關於將數據保存在磁盤，是永久的，可是其針對的是固定的域名下的文件，打開其餘的域名下的網頁，localStorage不會顯示。

3、sessionStorage

1. 定義：一個本地的小型數據庫

   • 存儲在本地，容量爲5M或者更大;
   • 不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。

2. 注意點：

   • sessionStorage一樣不須要再服務器的環境下運行；
   • 不須要額外的文件支持；
   • sessionStorage數據設置後即便頁面進行重載也不會清除；但當該窗口關閉後，裏面的數據就會清除，再打開沒有數據。至關於將數據保存在內存中。

3. 代碼運用

//設置：
sessionStorage.setItem("mycolor", "456");
sessionStorage.mycolor= '456';

//獲取：
var $color = sessionStorage.getItem("mycolor");
var $color = sessionStorage.mycolor

var $color = sessionStorage.key(0);//獲取第一個鍵，按角標獲取
var $color = sessionStorage.key("");//獲取最後一個鍵

var $length = sessionStorage.length;//獲取數據的長度

//刪除
sessionStorage.removeItem("mycolor");

//清空
sessionStorage.clear();//將全部保存的數據刪除

說明：

1. sessionStorage的使用方法和localStorage同樣。
2. 數據是有排序的，後加入的角標靠前，最後加入的角標爲0.

• 做者：天宇之遊
• 出處：http://www.cnblogs.com/cwp-bg/
• 本文版權歸做者和博客園共有，歡迎轉載、交流，但未經做者贊成必須保留此段聲明，且在文章明顯位置給出原文連接。