瀏覽器儲存 的幾種方式

2021-10-04 18:50:34 字數 2924 閱讀 2329

常見的瀏覽器儲存主要有:

1.屬於文件物件模型:documentcookie,

2.屬於瀏覽器物件模型 localstorage,sessionstorage,indexdb

一.cookie

h5之前,儲存主要用cookie,缺點是請求頭上帶著資料,

h5之前,儲存主要用cookies,缺點是在請求頭上帶著資料,導致流量增加。大小限制4k

設定cookie的方式,及可以新增的引數

1.expires(過期時間)

過了過期時間,瀏覽器就會刪除該cookie,想要刪除cookie,只需要把它過期時間設定成過去的時間即可

(如果不設定過期時間,則表示這個cookie生命週期為瀏覽器會話期間,只要關閉瀏覽器視窗,cookie就消失了。)

document.cookie = "username=linda; expires=thu, 18 dec 2013 12:00:00 gmt; path=/"    // 設定cookie

document.cookie = "username=; expires=thu, 01 jan 1970 00:00:00 gmt" // 刪除cookie

2.path(路徑)

(值可以是乙個目錄,或者是乙個路徑。)

如果cc.com/test/index.html建立了乙個cookie,那麼在cc.com/test/目錄裡的所有頁面,以及該目錄下面任何子目錄裡的頁面都可以訪問這個cookie。因此在cc.com/test/test2/test3裡的任何頁面都可以訪問cc.com/test/index.html建立的cookie。若cc.com/test/若想訪問cc.com/test/index.html設定的cookie,需要把cookie的path屬性設定成「/」。

在指定路徑的時候,凡是來自同一伺服器,url裡有相同路徑的所有web頁面都可以共享cookies。

3.domain(主機名,是指同乙個域下的不同主機)

例如:www.baidu.com和map.baidu.com就是兩個不同的主機名。預設情況下,乙個主機中建立的cookie在另乙個主機下是不能被訪問的,但可以通過domain引數來實現對其的控制:document.cookie = "name=value;domain=.baidu.com"

這樣,所有*.baidu.com的主機都可以訪問該cookie。

可以用此特性實現

2、localstorage

以鍵值對(key-value)的方式儲存,鍵值對總是以字串的形式儲存,永久儲存,永不失效,除非手動刪除。ie8+支援,每個網域名稱限制5m。開啟同域的新頁面也能訪問得到。

window.localstorage.setitem('mycat', 'tom');  // 設定

let cat = window.localstorage.getitem('mycat'); // 讀取

window.localstorage.removeitem('mycat'); // 移除

window.localstorage.clear(); // 清空所有

window.localstorage.key(1); // 讀取索引為1的值

window.localstorage.length; // 數目

sessionstorage操作的方法與localstorage是一樣的,區別在於 sessionstorage當前頁面有效,在關閉頁面後即被清空,而 localstorage 除非刪除,會一直儲存。

注意,重新整理頁面sessionstorage不會清除,但是開啟同域新頁面訪問不到

資料量不大時,我們可以通過sessionstorage或者localstorage來進行儲存,但是當資料量較大或符合一定的規範時,我們可以使用資料庫來進行資料的儲存。

indexeddb 鼓勵使用的基本模式如下所示:

const dbname = "demo_db";

//開啟我們的資料庫,第二個引數為資料庫版本號,預設為1

var request = window.indexeddb.open(dbname, 2);

request.onerror = function(event) ;

request.onupgradeneeded = function(event) );

// 建立乙個索引來通過姓名來搜尋客戶。名字可能會重複,所以我們不能使用 unique 索引

objectstore.createindex("name", "name", );

// 使用郵箱建立索引,我們向確保客戶的郵箱不會重複,所以我們使用 unique 索引

objectstore.createindex("email", "email", );

// 使用事務的 oncomplete 事件確保在插入資料前物件倉庫已經建立完畢

objectstore.transaction.oncomplete = function(event) );

};

詳細使用方式不在此處詳細介紹可詳細閱讀

不是什麼資料都適合放在本地儲存中的,因為它們儲存在本地容易被篡改,使用它們的時候,需要時刻注意是否有**存在 xss 注入的風險。所以千萬不要用它們儲存你系統中的敏感資料。

瀏覽器的儲存

cookie,localstorage,sessionstorage,indexdb 我們先來通過 學習下這幾種儲存方式的區別 特性cookie localstorage sessionstorage indexdb 資料生命週期 一般由伺服器生成,可以設定過期時間 除非被清理,否則一直存在 頁面關...

web瀏覽器儲存的不同方式

效果圖 瀏覽器儲存的不同方式 1 生命期為只在設定的cookie過期時間之前一直有效,即使視窗或瀏覽器關閉。存放資料大小為4k左右 有個數限制 各瀏覽器不同 一般不能超過20個。與伺服器端通訊 每次都會攜帶在http頭中,如果使用cookie儲存過多資料會帶來效能問題。2 sessionstorag...

詳解瀏覽器儲存

隨著對前端的了解越來越深入,了解到了很多種瀏覽器的儲存方案,如 cookie localstorage等,哪這些儲存方案有何異同,分別的適用場景又是什麼呢。cookie 被創造出來的本意並不是本地儲存,而是為了辨別使用者身份。眾所周知,http 協議是無狀態的,也就是說你每一次傳送給伺服器的請求對於...