常見的瀏覽器儲存主要有:
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 協議是無狀態的,也就是說你每一次傳送給伺服器的請求對於...