在HTML5出現之前，如果開發者需要在客戶端存儲少量的數據，只能通過cookie來實現，但是cookie存在幾個不足點：

?每個域名下cookie的大小限制在4KB。
?cookie會包含在每個http請求中，這樣會導致發送重復的數據。
?cookie在網絡傳輸過程中沒有加密，存在安全隱患。

在HTML5新增了Web storage功能，Web Storage官方建議為每個網站是5MB，能存儲比cookie更多的數據，并且具有比cookie更強大的功能。Web Storage現在已經得到了Firefox、Opera、Chrome、Safari各主流瀏覽器的支持。

Web Storage簡介

Web Storage又分為Session Storage和Local Storage：

Session Storage：與session類似，Session Storage保存的數據生存期限與Session期限相同，用戶Session結束時，Session Storage保存的數據也就消失了。

Local Storage： Local Storage保存的數據一直在本地，除非用戶或程序顯式地清楚，否則這些數據會一致存在。

window對象中提供了sessionStorage和localStorage兩個屬性，這兩個屬性分別代表了Session Storage和Local Storage。這個兩個功能和用法幾乎是相同的，只是它們保存數據的生存期限不同而已。storage提供了以下屬性和方法（以localStorage為例）：

?localStorage.length：獲取key-html' target='_blank'>value對的數目；
?localStorage.key(index)：獲取第index索引的key；
?localStorage.getItem(key)：獲取指定key對應的value；
?localStorage.setItem(key,value)：保存指定的key-value對；
?localStorage.removeItem(key)：刪除指定key對應的key-value對；
?localStorage.clear()：刪除所有key-value對。
需要注意的是，key和value都必須為字符串，換言之，web Storage的API只能操作字符串。那么一些不是字符串的數據，我們可以通過JSON等方式將其轉化成字符串格式后在操作。

Web Storage用JSON存儲多個數據

我們通過一個小程序來熟悉一下相關屬性和方法的基本用法：

?錄入學生的基本信息（包括學號，姓名，年級，性別），以學號為key值來存儲到local storage中；
?通過學號來查詢學生的基本信息；
?顯示全部學生的信息；
首先我們設計HTML頁面

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title HTML本地存儲之web storage /title  style type= text/css  #content{  border: 1px solid #3D19DD;  width:600px;  text-align:center;  padding: 10px 0;  margin: 0 auto;  #content input{  margin-top: 10px;  /style  /head  body  p id= content  label for= user_num 學號： /label  input type= text id= user_num name= user_num /  br/  label for= user_name 姓名： /label  input type= text id= user_name name= user_name /  br/  label for= grade 年級： /label  input type= text id= grade name= grade /  br/  label for= sex 性別： /label  input type= text id= sex name= sex /  br/  input type= button quot;save() value= 添加名單 /  hr/  label for= search_num 輸入學號： /label  input type= text id= search_num name= search_num /  input type= button quot;find() value= 查找學生信息 /  p id= find_result br/ /p  hr/  input type= button quot;show() value= 顯示所有  p id= list  br /  /body  /html 

通過JS實現學生信息保存到local storage中，通過分析我們發現需要保存的學生信息包括多個字段，這時，我們可以利用JSON的stringify()方法，將復雜對象轉變成字符串，存入Web Storage中；當從Web Storage中讀取時，可以通過JSON的parse()方法再轉換成JSON對象：

function save(){  var user_num = document.getElementById( user_num ).value;  var user_nameElement = document.getElementById( user_name ).value;  var gradeElement = document.getElementById( grade ).value;  var sexElement = document.getElementById( sex ).value;  var msg = {  user_name: user_nameElement,  grade: gradeElement,  sex: sexElement,  localStorage.setItem(user_num,JSON.stringify(msg));  }

我們往localStorage里存入三條學生信息，并查看localStorage中的存儲信息：

用JS實現通過學號查找學生信息時，需要注意取出的value值為JSON字符串，需要通過JSON的parse()方法再轉換成JSON對象，代碼如下：

function find(){  var user_num = document.getElementById( search_num ).value;  var str = localStorage.getItem(user_num);  var msg = JSON.parse(str);  var find_result = document.getElementById( find_result  find_result.innerHTML = 學號為： +user_num+ 的基本信息： 姓名： +msg.user_name + ，年級： + msg.grade+ ,性別： +msg.sex;  }

同理，顯示全部學生信息時，也一樣需要將取出的value字符串轉換成JSON對象：

function show(){  var list = document.getElementById( list  if(localStorage.length 0){  var result = table border= 1 >
 最后的效果圖如下：
Web Storage存儲圖片
前面我們已經提到過，本地存儲只支持字符串的存取，那么我們要做的就是將圖片轉換成 Data URI 。其中一種實現方式就是用canvas元素來加載圖片。然后你可以以Data URI的形式從canvas中讀取圖片。 
保存圖片的函數如下：
function setImg(key,src){  var img = document.createElement( img  //當圖片加載完成的時候觸發回調函數  img.addEventListener( load ,function(){  var imgCanvas = document.createElement( canvas ),  imgContext = imgCanvas.getContext( 2d  //確保canvas元素大小和圖片的尺寸一致  imgCanvas.width = this.width;  imgCanvas.height = this.height;  //渲染圖片到canvas中  imgContext.drawImage(this,0,0,this.width,this.height);  //用data url的形式取出  img.crossOrigin = * //防止跨域取照片出錯  var imgAsDataURL = imgCanvas.toDataURL( image/png  //保存到本地存儲中  try{  localStorage.setItem(key, imgAsDataURL);  catch(e){  alert( 保存失敗！請重試。。。  }, false);  img.src = src;  }
該函數接收兩個參數，一個是key值，還有一個是圖片的路徑，通過setImg(“img1”,”1.jpg”)保存圖片到localStorage，我們可以查看Local Storage的存儲情況：
獲取并顯示的代碼函數如下：
function getImg(key){  var srcStr = localStorage.getItem(key);  var imgObj = document.createElement( img  imgObj.src = srcStr;  document.body.appendChild(imgObj);  }
該函數只接收一個參數：需要查找圖片的key值：
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！
相關推薦：
HTML5的本地存儲IndexedDB
以上就是HTML5本地存儲之Web Storage的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。