本地存儲-webStorage

  webstorage 和 本地數據庫。Web Storage 是對H4中的cookie機制的改善。由於cookie存在很多缺陷,H5決定不再使用它,轉而使用webstorage。 本地數據庫,顧名思義,就是在客戶端本地建立一個數據庫,把服務器端的部分數據拿到本地存儲,這樣就可以爲服務器減輕壓力,加快訪問速度(畢竟,你知道運行本地項目和訪問服務器速度上的差別!)。

在H4中,cookie存儲永久數據存在這樣幾個問題:1cookie大小限制爲4kb,2cookie是隨着HTTP一起發送的,浪費了一定的帶寬。3cookie也不是很容易用。

H5中的本地存儲,提供兩種,sessionstorage 和localstorage。

sessionstorage:將數據保存在session中。(有的小夥伴不知道什麼是session,在這裏科普一下:當你打開一個瀏覽器,那麼一個session就建立了,從你打開瀏覽器開始,知道你關閉這個瀏覽器,這個session都是存在的,session可以保存你在這段時間裏的任何數據。)

localstorage:將數據存儲在硬盤設備中。也就是我們存的東西,你關了瀏覽器,即使是關了電腦,也是存在的。就像存了一個電影,啥時候看都OK。

在目前:Firefox3.6+,Chrome6+,Safari5+,opera10.5+,IE8+都是支持的。

下邊來點例子,稍微的爽一下下,不會後端怎麼了,該存存,該取取,前端也是可以的~~~不過,有一點要說明,前端是能幹,不過,安全性真是差太多,重要的數據可不要放前端哦!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webstorage存儲和讀取</title>
</head>
<body>
    <p id="msg"></p>
    請輸入數據:<input type="text" id="input"> <br>
    <input type="button" οnclick="saveData('input')" value="保存數據"> <br>
    <input type="button" οnclick="loadData('msg')" value="讀取數據">
</body>
<script>
    /*session存儲開始*/
    function saveData(id) {
        var target=document.getElementById(id);
        var str=target.value;
        sessionStorage.setItem('message',str); //將str存儲到message中
    }
    function loadData(id) {
        var target=document.getElementById(id);
        var msg=sessionStorage.getItem('message');//從session中拿到message
        target.innerHTML=msg;
    }
    /*session存儲結束*/

    /*localstorage存儲開始*/
    function saveData1(id) {
        var target=document.getElementById(id);
        var str=target.value;
        localStorage.setItem('message',str); //將str存儲到message中
    }
    function loadData1(id) {
        var target=document.getElementById(id);
        var msg=localStorage.getItem('message');//從session中拿到message
        target.innerHTML=msg;
    }
    /*localstorage存儲結束*/
</script>
</html>
讀者可以到瀏覽器中去查看存儲的數據,方法是   以Chrome爲例:F12-》application-》storage-》localstorage或者sessionstorage,注意一個是永久存儲,另一個是會話存儲。

下面我們來做一個簡單的留言板。目的是用storage來存儲大量的數據。

我們要顯示文本內容,以及時間日期。在這裏,我們的數據必須是以鍵值對的形式存儲。我們讓文本內容作爲鍵值,日期時間作爲鍵名。爲什麼呢?因爲時間不會重複!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <textarea name="" id="demo" cols="50" rows="10"></textarea> <br>
    <input type="button" value="追加" οnclick="saveData('demo')"> <br>
    <input type="button" value="初始化" οnclick="clearData('demo')">
    <hr>
    <p id="msg"></p>
</body>
<script>
    window.οnlοad=function () {
        loadData('msg');
    }
    function saveData(id) {
        var date=document.getElementById(id).value;
        var time=new Date().getTime();
        localStorage.setItem(time,date);
        alert("保存完成!");
        loadData('msg');
    }
    function loadData(id) {
        var result='<table border="1">';
        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 dateStr=date.toLocaleString();
            result+='<tr><td>'+value+'</td><td>'+dateStr+'</td></tr>';
        }
        result+='</table>';
        var target=document.getElementById(id);
        target.innerHTML=result;
    }
    function clearData() {
        localStorage.clear();
        alert("清除數據");
        loadData('msg');
    }
</script>
</html>
以上就是關於本地存儲的一些介紹,歡迎大家互相溝通交流!請多指教
發佈了40 篇原創文章 · 獲贊 26 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章