HTML5 網頁存儲 Web Storage

一、認識Web Storage

Web Storage是一種將少量數據存儲在客戶端（client）磁盤的技術。只要支持WebStorage API規格的瀏覽器，網頁設計者都可以使用JavaScript來操作它，我們先了解一下Web Storage。

Web Storage的容量由客戶端瀏覽器決定，通常1MB~5MB。

Web Storage純粹運行客戶端，不會每次網頁請求連帶發送給服務端。

Web Storage以一組key-html' target='_blank'>value對應保存數據。

Web Storage提供兩種方式將數據保存在客戶端：一種是localStorage，一種是sessionStorage，兩者的差異在于申明周期和有效范圍。

檢測瀏覽器是否支持Web Storage，語法如下：

if(typeof(Storage)== undefined ){ span >
注意：IE和Firefox測試時需要把文件上傳到服務器或者localhost才能運行。建議測試時使用Google Chrome瀏覽器。
二、具體學習
1、訪問localStorage
相同網站是指：協議、主機（domain與ip）、傳輸端口（port）都必須相同。
WebStorage只允許存儲字符串數據，有以下3種訪問localStorage的方法，前面的window可以不寫
Storage對象的setItem和getItem方法（key： userdata ，value： Hello World ）
存儲：window.localStorage.setItem(key,value);
讀取：var v = window.localStorage.getItem(key);
數組索引
存儲：window.localStorage[key] =value;
讀取：var v = window.localStorage[key];
屬性
存儲：window.localStorage.key =value;
讀取：var v = window.localStorage.key;
 span >
二、刪除localStorage
要想刪除某一條localStorage數據，可以調用removeItem方法或者delete屬性進行刪除。
window.localStorage.removeItem( userdata 
delete window.localStorage.userdata;
delete.window.localStorage[ userdata 
要想刪除全部的localStorage數據，可以使用clear()方法。
localStorage.clear();
 !DOCTYPE html  html  head  title 網頁存儲localStorage /title  script type= text/javascript function onLoad(){ if(typeof(Storage)== undefined ){ alert( Sorry！你的瀏覽器不支持Web Storage  else{ btn_save.addEventListener( click ,saveToLocalStorage); btn_load.addEventListener( click ,loadFromLocalStorage); btn_clear.addEventListener( click ,clearLocalStorage);function saveToLocalStorage(){ localStorage.username = inputname.value;function loadFromLocalStorage(){ show_LocalStorage.innerHTML = localStorage.username+ 你好，歡迎來到我的網站！ function clearLocalStorage(){ strong localStorage.clear(); /strong  show_LocalStorage.innerHTML = localStorage.username; /script  /head  body onload= onLoad() 請輸入你的姓名： input type= text id= inputname value= / br/  p id= show_LocalStorage /p br /  button id= btn_save 存儲到localStorage /button  button id= btn_load 從localStorage讀取數據 /button  button id= btn_clear 清除localStorage數據 /button  /body  /html 
三、訪問sessionStorage
存儲
window.sessionStorage.setItem(key,value);
window.sessionStorage [key] = [value];
window.sessionStorage.key= value;
讀取
var v = window.sessionStorage.getItem(key);
var v = window.sessionStorage [key];
var v = window.sessionStorage.key;
清除
window.sessionStorage.removeItem(key);
delete window.sessionStorage.key;
delete window.sessionStorage [key];
//全部清除
sessionStorage.clear();
 span >

注：JavaScript里的運算符“+”不僅可以數字相加還可以字符串相加。例如 123 +456= 123456 
上例中localStorage.counter++;如果改成localStorage.counter = localStorage.counter +1;就會出現”11111......“
JavaScript將字符串轉換成為數字可以用Number()方法，localStorage.counter =Number(localStorage.counter )+1;
以上就是HTML5之網頁存儲 的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。