jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage怎么用

這篇文章主要介紹jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、cookie

定義：

存儲在本地，容量最大4k，在同源的http請求時攜帶傳遞，損耗帶寬；

可設置訪問路徑，只有此路徑及此路徑的子路徑才能訪問此cookie，存在有效的時間。

注意點：

cookie的訪問需要服務器環境，直接在本地文件訪問無效；

cookie的訪問和設置需要導入jquery.cookie.js文件；

瀏覽器對每一個訪問的地址下可添加的cookie是有限制的；同時每個瀏覽器可添加的cookie個數也存在限制。

作用：

儲存用戶的痕跡信息，如用戶名，ID號，密碼等，是服務器腳本發送給瀏覽器的加密數據，便于下次訪問時用戶可以直接登錄等；

運用代碼

//訪問cookie，mycolor代表鍵
var $cook = $.cookie("mycolor");
//設置cookie
$.cookie("mycolor", "red"});
$.cookie("mycolor", "red", { expires: 7, path: '/' });//增加了有效時間和訪問路徑
//刪除cookie,傳遞null值
$.cookie("mycolor", null});

說明：

'mycolor'參數相當于cookie存儲數據的鍵，即數據的名字，通過名字訪問；

cookie的設置有三個參數，第一為設置數據的鍵，第二個為設置數據的值，expires表示有效時間，單位為天，path為訪問路徑，"/"表示當前文件路徑，在網站中表示根目錄。

注意：如果不設置路徑，默認情況下只有設置cookie的網頁才可以訪問此cookie；如果想網站的網頁可以共享cookie，將路徑設為根目錄。

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

二、localStorage

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

存儲在本地，容量為5M或者更大，不會在請求時候攜帶傳遞；

數據在所有同源窗口中共享，一直有效，除非人為刪除，可作為長期數據。

注意點：

localStorage數據不需要依賴服務器環境訪問，可以直接在本地文件訪問；

不需要額外的文件支持。

同源窗口指的是同一個域名下或者是index.html所在的文件夾下的文件路徑。

代碼運用

//設置：
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();//將所有保存的數據刪除

說明：

設置數據格式類似鍵值對，"mycolor"代表key,"456"代表值。

數據是有排序的，后加入的角標靠前，最后加入的角標為0.

注意：localStorage相當于將數據保存在磁盤，是永久的，但是其針對的是固定的域名下的文件，打開其他的域名下的網頁，localStorage不會顯示。

三、sessionStorage

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

存儲在本地，容量為5M或者更大;

不會在請求時候攜帶傳遞，在同源的當前窗口關閉前有效。

注意點：

sessionStorage同樣不需要再服務器的環境下運行；

不需要額外的文件支持；

sessionStorage數據設置后即使頁面進行重載也不會清除；但當該窗口關閉后，里面的數據就會清除，再打開沒有數據。相當于將數據保存在內存中。

代碼運用

//設置：
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();//將所有保存的數據刪除

說明：

sessionStorage的使用方法和localStorage一樣。

數據是有排序的，后加入的角標靠前，最后加入的角標為0.

以上是“jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage怎么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！