web本地儲存

HTML5 Web 儲存

HTML5 web 儲存,一個比cookie更好的本地儲存方式。

什麼是 HTML5 Web 儲存?

使用HTML5可以在本地儲存使用者的瀏覽資料。

早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能.

資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。

瀏覽器支援

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支援Web 儲存。
注意: Internet Explorer 7 及更早IE版本不支援web 儲存.

localStorage 和 sessionStorage

客戶端儲存資料的兩個物件為：

• localStorage - 沒有時間限制的資料儲存
• sessionStorage - 針對一個 session 的資料儲存

localStorage 物件

localStorage 物件儲存的資料沒有時間限制。第二天、第二週或下一年之後，資料依然可用。

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

• 儲存資料：localStorage.setItem(key,value);
• 讀取資料：localStorage.getItem(key);
• 刪除單個資料：localStorage.removeItem(key);
• 刪除所有資料：localStorage.clear();
• 得到某個索引的key：localStorage.key(index);

sessionStorage 物件

sessionStorage 方法針對一個 session 進行資料儲存。當使用者關閉瀏覽器視窗後，資料會被刪除。

使用方法：
儲存資料：sessionStorage.setItem("website", "W3Cfuns.com");
讀取資料：sessionStorage.getItem("website");

開發一個簡單的網站列表程式

網站列表程式實現以下功能：

• 可以輸入網站名，網址，以網站名作為key存入localStorage；
• 根據網站名，查詢網址；
• 列出當前已儲存的所有網站；

JS程式碼：

//儲存資料  
function save(){  
    var siteurl = document.getElementById("siteurl").value;  
    var sitename = document.getElementById("sitename").value;  
    localStorage.setItem(sitename, siteurl);
    alert("新增成功");
}
//查詢資料  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var sitename = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");  
    find_result.innerHTML = search_site + "的網址是：" + sitename;  
}

HTML:

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
    <label for="sitename">網站名(key)：</label>  
    <input type="text" id="sitename" name="sitename" class="text"/>  
    <br/>  
    <label for="siteurl">網 址(value)：</label>  
    <input type="text" id="siteurl" name="siteurl"/>  
    <br/>  
    <input type="button" onclick="save()" value="新增記錄"/>  
    <hr/>  
    <label for="search_phone">輸入網站名：</label>  
    <input type="text" id="search_site" name="search_site"/>  
    <input type="button" onclick="find()" value="查詢網站"/>  
    <p id="find_result"><br/></p>  
</div>