天天看點
傳回

HTML5 Web Storage（讀書筆記）

來自于《HTML5與CSS3權威指南》第七章的内容，Web Storage的一些基礎知識。

HTML4中采用cookies存儲機制，可以在用戶端存儲使用者名等簡單的使用者資訊。但存在以下幾個問題：

1）大小：cookies的大小被限制在4KB；

2）帶寬：cookies随HTTP事務一起被發送，是以會浪費一部分發送cookies時使用的帶寬；

HTML5提供了在用戶端本地儲存資料的功能，即Web Storage功能。如下面示例所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
function SaveStorage(id){
    var target=document.getElementById(id);
    var str=target.value;
    sessionStorage.setItem("message",str);  //二選一
    //localStorage.setItem("message",str);
    alert("資料儲存成功");
}

function LoadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message"); //二選一 
    //var msg=localStorage.getItem("message");
    target.innerHTML=msg;    
}
</script>
</head>
<body>
<h1>Web Storage</h1>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="儲存資料" οnclick="saveStorage('input');" >
<input type="button" value="讀取資料" οnclick="LoadStorage('msg');" >
</body>
</html>

1）sessionStorage

将資料儲存在session對象中，資料儲存是從使用者進入浏覽器到浏覽器關閉這段時間。

  • sessionStorage.setItem(key,value);    //儲存資料
  • sessionStorage.getItem(key);        //讀取資料

2）localStorage

将資料儲存在用戶端本地的硬體裝置（通常指硬碟等），即使浏覽器關閉，資料仍然存在。

  • localStorage.setItem(key,value);   //儲存資料
  • localStorage.getItem(key);       //讀取資料
  • localStorage.removeItem(key);    //删除指定key本地存儲的值

（一）制作簡單Web留言本

Web Storage儲存資料時，以“鍵名/鍵值”這樣的格式。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>簡單留言本</title>
<script type="text/javascript">
function saveStorage(id){
    var data=document.getElementById(id).value;
    var time=new Date().getTime();
    localStorage.setItem(time,data);    
    alert("資料儲存成功");
    loadStorage('msg');
}

function loadStorage(id){
    var result='<table >';
    for(var i=0;i<localStorage.length;i++){
        var key=localStorage.key(i);
        var value=localStorage.getItem(key);
        var date=new Date();
        date.setTime(key);
        var datastr=date.toGMTString();
        result+='<tr><td>' + value + '</td><td>' + datastr +'</td></tr>';
    }
    result+='</table>';
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    target.innerHTML=result;    
}

function clearStorage(){
    localStorage.clear();  //清除用戶端本地存儲的資料
    alert("全部資料被清除");
    loadStorage('msg');
}
</script>
</head>
<body>
<h1>Web Storage</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br/>
<input type="button" value="追加" οnclick="saveStorage('memo');" >
<input type="button" value="初始化" οnclick="clearStorage('msg');" >
<hr>
<p id="msg"></p>
</body>
</html>

（二）作為簡單資料庫使用

localStorage存儲的值都是字元串類型，在處理複雜的資料時，比如json資料時，需要借助JSON類，将json字元串轉換成真正可用的json格式。

1）var str=JSON.stringify(data);

将參數data表示要轉換成JSON格式文本資料的對象，這個方法是将對象轉換成JSON格式的文本資料。

2）var data=JSON.parse(str);

參數str表示從localStorage中獲得的資料，這個方法表示将傳入的資料轉換成JSON對象。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>簡易資料庫示例</title>
<script type="text/javascript">
function saveStorage(){
    var data=new Object();
    data.name=document.getElementById("name").value;
    data.email=document.getElementById("email").value;
    data.tel=document.getElementById("tel").value;
    data.memo=document.getElementById("memo").value;
    
    var str=JSON.stringify(data); 
    localStorage.setItem(data.name,str);    
    alert("資料儲存成功");
}

function findStorage(id){
    var find=document.getElementById("find").value;
    var str=localStorage.getItem(find);
    var data=JSON.parse(str);
    
    var result="姓名：" + data.name + "<br>";
    result+= "EMAIL：" + data.email + "<br>";
    result+= "電話号碼：" + data.tel + "<br>";
    result+= "備注：" + data.memo + "<br>";
    
    var target=document.getElementById(id);
    target.innerHTML=result;    
}

</script>
</head>
<body>
<h1>使用Web Storage來做簡易資料庫示例</h1>
<table >
    <tr>
        <td>姓名：</td>
        <td><input type="text" id="name"></td>
    </tr>
    <tr>
        <td>EMAIL：</td>
        <td><input type="text" id="email"></td>
    </tr>
    <tr>
        <td>電話号碼：</td>
        <td><input type="text" id="tel"></td>
    </tr>
    <tr>
        <td>備注：</td>
        <td><input type="text" id="memo"></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="儲存" οnclick="saveStorage();"></td>
    </tr>     
</table>
<hr>
<p>檢索：<input type="text" id="find">
         <input type="button" value="檢索" οnclick="findStorage('msg');">
</p>
<p id="msg"></p>
</body>
</html>

Web Storage與Cookies相比的一些優勢：

1）存儲空間更大：IE8下每個獨立的存儲空間為10M，其他浏覽器實作略有不同，但都比Cookie要大很多。

2）存儲内容不會發送到伺服器：當設定了Cookies後，Cookies的内容會随着請求一并發送的伺服器，這對于本地存儲的資料是一種帶寬浪費。而Web Storage中的資料則僅僅是存在本地，不會與伺服器發生任何互動。

3）更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得資料操作更為簡便。

4）獨立的存儲空間：每個域（包括子域）有獨立的存儲空間，各個存儲空間是完全獨立的，是以不會造成資料混亂。

html/css javascript web html5 讀書 cookies button 存儲
上一篇: Html5的Web Storage的基礎
下一篇: HTML5 Web存儲(Web Storage)技術及用法

繼續閱讀