生活随笔
收集整理的這篇文章主要介紹了
storage详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在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-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頁面
XML/HTML Code 復制內容到剪貼板 <!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>?? ????<div?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"?onclick="save()"?value="添加名單"/>?? ?? ????????<hr/>?? ?? ????????<label?for="search_num">輸入學號：</label>?? ?? ????????<input?type="text"?id="search_num"?name="search_num"/>?? ?? ????????<input?type="button"?onclick="find()"?value="查找學生信息"/>?? ?? ????????<p?id="find_result"><br/></p>?? ????????<hr/>?? ?????????<input?type="button"?onclick="show()"?value="顯示所有">? ?? ?????????<div?id="list">?? ?? ?????????</div>? ?? ????</div>?? ?? ????<br?/>?????????? ?? </body>?? </html>?? 通過JS實現學生信息保存到local storage中，通過分析我們發現需要保存的學生信息包括多個字段，這時，我們可以利用JSON的stringify()方法，將復雜對象轉變成字符串，存入Web Storage中；當從Web Storage中讀取時，可以通過JSON的parse()方法再轉換成JSON對象：
JavaScript Code 復制內容到剪貼板 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對象，代碼如下：
JavaScript Code 復制內容到剪貼板 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對象：
JavaScript Code 復制內容到剪貼板 function?show(){?? ?? ????????var?list?=?document.getElementById("list");?? ?? ????????if(localStorage.length>0){?? ?? ????????????var?result?=?"<table?border='1'?style='width:300px;?margin:0?auto;'>";?? ?? ????????????result?+=?"<tr><td>學號</td><td>姓名</td><td>年級</td><td>性別</td></tr>";?? ?? ????????????for(var?i=0;i<localStorage.length;i++){?? ?? ????????????????var?user_num?=?localStorage.key(i);?? ?? ????????????????var?str?=?localStorage.getItem(user_num);?? ?? ????????????????var?msg?=?JSON.parse(str);?? ?? ????????????????result?+=?"<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";?? ?? ????????????}?? ?? ????????????result?+=?"</table>";?? ?? ????????????list.innerHTML?=?result;?? ?? ??????????}else{?? ?? ????????????????list.innerHTML?=?"當前還沒有數據";?? ?? ??????????}?? ??????}??? ???? ?最后的效果圖如下：
?
Web Storage存儲圖片
前面我們已經提到過，本地存儲只支持字符串的存取，那么我們要做的就是將圖片轉換成 Data URI 。其中一種實現方式就是用canvas元素來加載圖片。然后你可以以Data URI的形式從canvas中讀取圖片。?
保存圖片的函數如下：
JavaScript Code 復制內容到剪貼板 function?setImg(key,src){ ?? ????????var?img?=?document.createElement('img'); ?? ?????????? ????????img.addEventListener("load",function(){ ?? ????????????var?imgCanvas?=?document.createElement("canvas"), ?? ????????????imgContext?=?imgCanvas.getContext("2d"); ?? ?????????? ????????imgCanvas.width?=?this.width; ?? ????????imgCanvas.height?=?this.height; ?? ?????????? ????????imgContext.drawImage(this,0,0,this.width,this.height); ?? ?? ?????????? ????????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的存儲情況：
獲取并顯示的代碼函數如下：
JavaScript Code 復制內容到剪貼板 function?getImg(key){ ?? ????????var?srcStr?=?localStorage.getItem(key); ?? ????????var?imgObj?=?document.createElement('img'); ?? ????????imgObj.src?=?srcStr; ??????????document.body.appendChild(imgObj); ??????} ???? 該函數只接收一個參數：需要查找圖片的key值：
以上就是本文的全部內容
總結
以上是生活随笔為你收集整理的storage详解的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
