首頁 > 文章 > web前端 > HTML5本地儲存之Web Storage

HTML5本地儲存之Web Storage

不言原創: 2018-06-14 10:07:401766瀏覽

這篇文章主要為大家詳細介紹了HTML5本地存儲之Web Storage的相關資料，Web Storage如何用JSON存儲多個數據，有興趣的小伙伴們可以參考一下

#在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頁面

<!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" 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="显示所有">
         <p id="list">
         </p>
    </p>
    <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=&#39;1&#39; style=&#39;width:300px; margin:0 auto;&#39;>";     
            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讀取圖片。

儲存圖片的函數如下：

function setImg(key,src){   
        var img = document.createElement(&#39;img&#39;);   
        //当图片加载完成的时候触发回调函数 
        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(&#39;img&#39;);   
        imgObj.src = srcStr;   
        document.body.appendChild(imgObj);   
    }

###該函數只接收一個參數：需要找出圖片的key值：#######

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

HTML5本地儲存之Web Storage

相關文章