瀏覽器儲存的幾種方式

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

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 注入的風險。所以千萬不要用它們儲存你系統中的敏感資料。

瀏覽器儲存的幾種方式

瀏覽器的儲存

web瀏覽器儲存的不同方式

詳解瀏覽器儲存

瀏覽器儲存 的幾種方式

瀏覽器的儲存

web瀏覽器儲存的不同方式

詳解瀏覽器儲存

相關推薦

瀏覽器儲存的幾種方式