Web Storage

時間 2019-11-20

標籤 web storage 欄目 HTML 简体版

原文原文鏈接

1、Web Storage是什麼？css

在HTML4中可使用Cookie，在客戶端保存諸如用戶名等簡單的用戶信息。可是經過長期的使用，人們發現用Cookie存儲數據存在如下幾個問題：html

　　　　大小：Cookie的大小被限制在4kb。前端

　　　　帶寬：Cookie是隨HTTP事務一塊兒被髮送的,所以會浪費一部分發送Cookie時使用的帶寬。apache

　　　　複雜性：要正確的操做Cookie是很困難的。瀏覽器

針對這些問題，在HTML5中從新提供了一種在客戶端本地保存數據的功能，它就是Web Storage功能。Web Storage功能，顧名思義，就是在Web上存儲數據的功能。這裏的存儲是針對客戶端本地而言的。Web Storage與Cookie類似，區別是:服務器

　　　　Web Storage能夠存儲更大容量的數據（通常爲5MB）。session

　　　　Web Storage僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊。dom

　　　　Web Storage擁有setItem()、getItem()、removeItem()、clear()等方法，不像Cookie，須要前端開發者本身封裝setCookie、getCookie。ide

2、localStorage和sessionStorage函數

Web Storage分爲兩種：sessionStorage和localStorage。

sessionStorage將數據保存在Session對象中。所謂Session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所通過的這段時間。存儲在sessionStorage裏面的數據在頁面會話結束時會被清除，頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話，不會消除數據。

localStorage將數據保存在客戶端本地的硬件設備（一般指硬盤，也能夠是其餘硬件設備中），即便瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站的時候仍然能夠繼續使用。

相同點

一、都是保存在瀏覽器端

都是保存在瀏覽器端的數據，不一樣瀏覽器沒法共享localStorage和sessionStorage信息。

二、都是同源的

不一樣源的頁面沒法共享localStorage和sessionStorage信息。所謂同源就是同域名、同端口、同協議。

三、操做方法相同

localStorage和sessionStorage都具備相同的操做方法，不但能夠用自身的setItem()，getItem()等方便存取，也能夠像普通對象同樣用點「.」操做符，及「[]」的方式進行數據存取。（下文有詳細介紹）

不一樣點

一、生命週期不一樣

localStorage爲永久存儲，除非用戶手動清除localStorage信息，不然這些信息將永遠存在。

sessionStorage爲臨時保存，生命週期爲當前窗口或標籤頁，一旦窗口或標籤頁被關閉了，那麼全部經過sessionStorage存儲的數據也就被清空了。

二、做用域不一樣

首先明確的是：不一樣瀏覽器沒法共享localStorage或sessionStorage信息；不一樣源的頁面沒法共享localStorage或sessionStorage信息。

localStorage信息能夠在相同瀏覽器中同源的不一樣頁面間共享，能夠是在不一樣標籤頁中的頁面、也能夠是在不一樣窗口的頁面。

sessionStorage信息不能夠在不一樣頁面或標籤頁間共享，即便是相同瀏覽器、相同學口中的同源頁面。這裏須要注意的是：

　　頁面及標籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

　　在當前頁面經過a連接打開的同源頁面，也能夠訪sessionStorage數據，不管是哪一種跳轉方式。

　　使用window.open和localtion.href打開的同源頁面也能夠獲取到sessionStorage數據。

這是由於sessionStorage是頁面級的，只有所有關閉當前頁和從其內部打開的全部頁面，或者直接關閉瀏覽器，才能夠消除當前頁的sessionStorage數據。

爲了驗證，我準備了兩個html文件，一個是index.html，另外一個是other.html。

index.html代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <a href="other.html" target="_blank">other.html</a>
</head>
<body>
</body>
<script>
    //演示設置Storage的三種方法
    var oLStorage = window.localStorage; 
    var oSStorage = window.sessionStorage; 
    oLStorage.setItem("localName","zhangsan");
    oLStorage.localAge="25";
    oLStorage["localSex"]="nan";
    oSStorage.setItem("sessionName","zhangsan");
    oSStorage.sessionAge="25";
    oSStorage["sessionSex"]="nan";
</script>
</html>

other.html代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>other</title>
</head>
<body>
    <p>other.index和index.html屬於相同域名和端口的頁面</p>
</body>
<script>
    console.log('localStorage'+window.localStorage);
    console.log('sessionStorage'+window.sessionStorage);
</script>
</html>

從index.html點擊a連接進入other.html，在other.html的Application裏能夠看到localStorage和sessionStorage。

打開一個新的標籤頁，直接輸入other.html的地址，在other.html的Application裏能夠看到localStorage，卻看不到sessionStorage。

3、Web Storage的操做方法

localStorage和sessionStorage都具備相同的操做方法,下文以sessionStorage爲例，localStorage相似。

　　setItem()存儲value
　　用途：將value存儲到key字段
　　用法：.setItem( key, value)
　　代碼示例：

sessionStorage.setItem("name", "zhangsan");

　　getItem()獲取value
　　用途：獲取指定key本地存儲的值
　　用法：.getItem(key)
　　代碼示例：

var value = sessionStorage.getItem("name");

　　removeItem()刪除value
　　用途：刪除指定key本地存儲的值
　　用法：.removeItem(key)
　　代碼示例：

sessionStorage.removeItem("name");

　　clear()清除全部的key/value
　　用途：清除全部的key/value
　　用法：.clear()
　　代碼示例：

sessionStorage.clear();

　　key() 獲取鍵值

　　用途：獲取指定索引index對應的鍵值key

　　用法：.key(index)

　　代碼示例：

sessionStorage.key(0);

　　length 獲取長度

　　用途：獲取本地存儲的長度

　　用法：.length

　　代碼示例：

sessionStorage.length

Web Storage不但能夠用自身的setItem(),getItem()等方便存取，也能夠像普通對象同樣用點「.」操做符，及「[]」的方式進行數據存取，像下例的代碼：

var oSStorage = window.sessionStorage;
oSStorage.setItem("sessionName","zhangsan");
oSStorage.sessionAge="25";
oSStorage["sessionSex"]="nan";

4、storage 事件

對 storage 對象進行任何修改，都會在文檔上觸發 storage 事件。當經過屬性或 setItem() 方法保存數據，使用 delete 操做符或者 removeItem() 刪除數據，或者調用 clear() 方法時，都會觸發該事件。

能夠對storage事件進行監聽：

object.addEventListener("storage", 監聽函數,false/true);

　　storage的event 對象有以下屬性：

　　key：設置或者刪除的鍵名。
　　oldValue:表示變動前的值。

　　newValue:變動後的值，若是是設置值，則是新值；若是是刪除鍵，則是 null。

　　url:事件觸發源的URL。

　　source:事件觸發源的URL。

　　storageArea:受到影響的storage對象。

　　domain 發生變化的存儲空間的域名。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。