HTML5使用WebStorage本地存儲

今天小編給大家分享的是HTML5使用Web Storage本地存儲的詳細介紹，相信大部分人都不太了解，為了讓大家更加了解，所以給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的曲松網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

在HTML5出現(xiàn)之前，如果開發(fā)者需要在客戶端存儲少量的數(shù)據(jù)，只能通過cookie來實現(xiàn)，但是cookie存在幾個不足點：

?每個域名下cookie的大小限制在4KB。
?cookie會包含在每個http請求中，這樣會導(dǎo)致發(fā)送重復(fù)的數(shù)據(jù)。
?cookie在網(wǎng)絡(luò)傳輸過程中沒有加密，存在安全隱患。

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

Web Storage簡介

Web Storage又分為Session Storage和Local Storage：

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

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

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

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

Web Storage用JSON存儲多個數(shù)據(jù)

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

?錄入學(xué)生的基本信息（包括學(xué)號，姓名，年級，性別），以學(xué)號為key值來存儲到local storage中；
?通過學(xué)號來查詢學(xué)生的基本信息；
?顯示全部學(xué)生的信息；
首先我們設(shè)計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">學(xué)號：</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">輸入學(xué)號：</label>
        <input type="text" id="search_num" name="search_num"/>
        <input type="button" onclick="find()" value="查找學(xué)生信息"/>
        <p id="find_result"><br/></p>
        <hr/>
         <input type="button" onclick="show()" value="顯示所有">
         <p id="list">
         </p>
    </p>
    <br />
</body>
</html>

HTML5使用Web Storage本地存儲

通過JS實現(xiàn)學(xué)生信息保存到local storage中，通過分析我們發(fā)現(xiàn)需要保存的學(xué)生信息包括多個字段，這時，我們可以利用JSON的stringify()方法，將復(fù)雜對象轉(zhuǎn)變成字符串，存入Web Storage中；當從Web Storage中讀取時，可以通過JSON的parse()方法再轉(zhuǎn)換成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里存入三條學(xué)生信息，并查看localStorage中的存儲信息：

HTML5使用Web Storage本地存儲

用JS實現(xiàn)通過學(xué)號查找學(xué)生信息時，需要注意取出的value值為JSON字符串，需要通過JSON的parse()方法再轉(zhuǎn)換成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 = "學(xué)號為："+user_num+"的基本信息： 姓名："+msg.user_name + "，年級：" + msg.grade+",性別："+msg.sex;     
    }

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

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>學(xué)號</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 = "當前還沒有數(shù)據(jù)";     
          }     
    }

最后的效果圖如下：

HTML5使用Web Storage本地存儲

Web Storage存儲圖片

前面我們已經(jīng)提到過，本地存儲只支持字符串的存取，那么我們要做的就是將圖片轉(zhuǎn)換成 Data URI 。其中一種實現(xiàn)方式就是用canvas元素來加載圖片。然后你可以以Data URI的形式從canvas中讀取圖片。
保存圖片的函數(shù)如下：

function setImg(key,src){   
        var img = document.createElement('img');   
        //當圖片加載完成的時候觸發(fā)回調(diào)函數(shù) 
        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;   
    }

該函數(shù)接收兩個參數(shù)，一個是key值，還有一個是圖片的路徑，通過setImg(“img1”,”1.jpg”)保存圖片到localStorage，我們可以查看Local Storage的存儲情況：

HTML5使用Web Storage本地存儲

獲取并顯示的代碼函數(shù)如下：

function getImg(key){   
        var srcStr = localStorage.getItem(key);   
        var imgObj = document.createElement('img');   
        imgObj.src = srcStr;   
        document.body.appendChild(imgObj);   
    }

該函數(shù)只接收一個參數(shù)：需要查找圖片的key值：

HTML5使用Web Storage本地存儲

以上就是HTML5使用Web Storage本地存儲的簡略介紹，詳細使用情況還需要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：HTML5使用WebStorage本地存儲
網(wǎng)站URL：http://muchs.cn/article20/gdiico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、小程序開發(fā)、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司