web儲存 實現本地儲存
阿新 • • 發佈：2019-01-04
本來沒想看html5，
但是毛概課無意把書翻到那一頁，無意中看了一點，
HTML5 Web 儲存
HTML5 web 儲存,一個比cookie更好的本地儲存方式。
什麼是 HTML5 Web 儲存?
使用HTML5可以在本地儲存使用者的瀏覽資料。
早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速. 這些資料不會被儲存在伺服器上，但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料，而不影響網站的效能.
資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。
瀏覽器支援
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支援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>