HTML (012) HTML5 Web 儲存 localStorage 和 sessionStorage-cnblog
一、HTML5 Web 儲存
HTML5 web 儲存,一個比cookie更好的本地儲存方式。
使用HTML5可以在本地儲存使用者的瀏覽資料。
早些時候,本地儲存使用的是 cookie。但是Web 儲存需要更加的安全與快速.
這些資料不會被儲存在伺服器上,但是這些資料只用於使用者請求網站資料上.它也可以儲存大量的資料,而不影響網站的效能.
資料以 鍵/值 對存在, web網頁的資料只允許該網頁訪問使用。
瀏覽器支援
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支援Web 儲存。
注意: Internet Explorer 7 及更早IE版本不支援web 儲存.
二、localStorage 和 sessionStorage
客戶端儲存資料的兩個物件為:
- localStorage - 用於長久儲存整個網站的資料,儲存的資料沒有過期時間,直到手動去除。
- sessionStorage - 用於臨時儲存同一視窗(或標籤頁)的資料,在關閉視窗或標籤頁之後將會刪除這些資料。
在使用 web 儲存前,應檢查瀏覽器是否支援 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined") { // 是的! 支援 localStorage sessionStorage 物件! // 一些程式碼..... } else { // 抱歉! 不支援 web 儲存。 }
三、localStorage 物件
localStorage 物件儲存的資料沒有時間限制。第二天、第二週或下一年之後,資料依然可用。
localStorage.sitename="菜鳥教程";
document.getElementById("result").innerHTML="網站名:" + localStorage.sitename;
例項解析:
- 使用 key="sitename" 和 value="菜鳥教程" 建立一個 localStorage 鍵/值對。
- 檢索鍵值為"sitename" 的值然後將資料插入 id="result"的元素中。
以上例項也可以這麼寫:
// 儲存
localStorage.sitename = "菜鳥教程";
// 查詢
document.getElementById("result").innerHTML = localStorage.sitename;
移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
不管是 localStorage,還是 sessionStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):
常用API:
- 儲存資料:localStorage.setItem(key,value);
- 讀取資料:localStorage.getItem(key);
- 刪除單個數據:localStorage.removeItem(key);
- 刪除所有資料:localStorage.clear();
- 得到某個索引的key:localStorage.key(index);
提示: 鍵/值對通常以字串儲存,你可以按自己的需要轉換該格式。
下面的例項展示了使用者點選按鈕的次數。
程式碼中的字串值轉換為數字型別:
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經點選了按鈕 " + localStorage.clickcount + " 次 ";
四、sessionStorage 物件
sessionStorage 方法針對一個 session 進行資料儲存。當用戶關閉瀏覽器視窗後,資料會被刪除。
如何建立並訪問一個 sessionStorage:
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在這個會話中你已經點選了該按鈕 " + sessionStorage.clickcount + " 次 ";
五、Web Storage 開發一個簡單的網站列表程式
1、演示了簡單的 localStorage 儲存與查詢
//儲存資料
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;
}
2、儲存複雜資料
我們將使用 [JSON.stringify](https://www.runoob.com/js/javascript-json-
stringify.html) 來儲存物件資料,[JSON.stringify](https://www.runoob.com/js/javascript-
json-stringify.html) 可以將物件轉換為字串。
var site = new Object;
...
var str = JSON.stringify(site); // 將物件轉換為字串
之後我們使用 JSON.parse
方法將字串轉換為 JSON 物件:
var site = JSON.parse(str);
//儲存資料
function save(){
var site = {};
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 將物件轉換為字串
localStorage.setItem(site.keyname,str);
alert("儲存成功");
}
//查詢資料
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的網站名是:" + site.sitename + ",網址是:" + site.siteurl;
}