HTML5-Web存儲

web存儲,一個比cookie更好的本地存儲方式

localStorage和sessionStorage

  localStorage-沒有時間限制的數據存儲

  sessionStorage-針對一個session的數據存儲

//是否支持
if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

 

localStorage對象

  localStorage對象存儲的數據沒有時間限制

localStorage.sitename="小南瓜";
document.getElementById("result").innerHTML="網站名:" + localStorage.sitename;

 

不管是 localStorage,還是 sessionStorage,可使用的API都相同,常用的有如下幾個(以localStorage為例):

保存數據:localStorage.setItem(key,value);
讀取數據:localStorage.getItem(key);
刪除單個數據:localStorage.removeItem(key);
刪除所有數據:localStorage.clear();
得到某個索引的key:localStorage.key(index);

 

 提示:鍵/值對通常以字符串存儲,你可以按自己的需要轉換該格式。

if(typeof(Storage)!=="undefined")
{
  if (localStorage.clickcount)
  {
  localStorage.clickcount=Number(localStorage.clickcount)+1;
  }
  else
  {
  localStorage.clickcount=1;
  }
  document.getElementById("result").innerHTML=" 你已經點擊了按鈕 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對不起,您的瀏覽器不支持 web 存儲。";
}

 

sessionStorage對象

  sessionStorage針對一個session進行數據存儲。當用戶關閉瀏覽器窗口后,數據會被刪除

   if(typeof(Storage)!=="undefined")
    {
        if (sessionStorage.clickcount)
        {
            sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
        }
        else
        {
            sessionStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML="在這個會話中你已經點擊了該按鈕 " + sessionStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="抱歉,您的瀏覽器不支持 web 存儲";
    }

 

簡單的網站列表程序

 <div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
        <label for="sitename">網站名(key):</label>  
        <input type="text" id="sitename" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">網 址(value):</label>  
        <input type="text" id="siteurl" name="siteurl"/>  
        <br/>  
        <input type="button" onclick="save()" value="新增記錄"/>  
        <hr/>  
        <label for="search_phone">輸入網站名:</label>  
        <input type="text" id="search_site" name="search_site"/>  
        <input type="button" onclick="find()" value="查找網站"/>  
        <p id="find_result"><br/></p>  
    </div>  
    <br/>  
    <div id="list">  
    </div>  
    <script>
    // 載入所有存儲在localStorage的數據
    loadAll();     
        
    //保存數據  
    function save(){  
        var siteurl = document.getElementById("siteurl").value;  
        var sitename = document.getElementById("sitename").value;  
        localStorage.setItem(sitename, siteurl);
        alert("添加成功");
    }
    //查找數據  
    function find(){  
        var search_site = document.getElementById("search_site").value;  
        var sitename = localStorage.getItem(search_site);  
        var find_result = document.getElementById("find_result");  
        find_result.innerHTML = search_site + "的網址是:" + sitename;  
    }
    //將所有存儲在localStorage中的對象提取出來,并展現到界面上
    function loadAll(){  
        var list = document.getElementById("list");  
        if(localStorage.length>0){  
            var result = "<table border='1'>";  
            result += "<tr><td>網站名</td><td>網址</td></tr>";  
            for(var i=0;i<localStorage.length;i++){  
                var sitename = localStorage.key(i);  
                var siteurl = localStorage.getItem(sitename);  
                result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";  
            }  
            result += "</table>";  
            list.innerHTML = result;  
        }else{  
            list.innerHTML = "數據為空……";  
        }  
    }      
    </script>

 

運行結果:

JSON.stringify

  存儲對象數據,將對象轉換為字符串

var site = new Object;
...
var str = JSON.stringify(site); // 將對象轉換為字符串

 

JSON.parse

   將字符串轉換為JSON對象

 <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
        <label for="keyname">別名(key):</label>  
        <input type="text" id="keyname" name="keyname" class="text"/>  
        <br/>  
        <label for="sitename">網站名:</label>  
        <input type="text" id="sitename" name="sitename" class="text"/>  
        <br/>  
        <label for="siteurl">網 址:</label>  
        <input type="text" id="siteurl" name="siteurl"/>  
        <br/>  
        <input type="button" onclick="save()" value="新增記錄"/>  
        <hr/>  
        <label for="search_phone">輸入別名(key):</label>  
        <input type="text" id="search_site" name="search_site"/>  
        <input type="button" onclick="find()" value="查找網站"/>  
        <p id="find_result"><br/></p>  
    </div>  
    <br/>  
    <div id="list">  
    </div>  
    <script>
    //保存數據  
    function save(){  
        var site = new Object;
        site.keyname = document.getElementById("keyname").value;
        site.sitename = document.getElementById("sitename").value;  
        site.siteurl = document.getElementById("siteurl").value;
        var str = JSON.stringify(site); // 將對象轉換為字符串
        localStorage.setItem(site.keyname,str);  
        alert("保存成功");
    }  
    //查找數據  
    function find(){  
        var search_site = document.getElementById("search_site").value;  
        var str = localStorage.getItem(search_site);  
        var find_result = document.getElementById("find_result");
        var site = JSON.parse(str);  
        find_result.innerHTML = search_site + "的網站名是:" + site.sitename + ",網址是:" + site.siteurl;  
    }  
    
    //將所有存儲在localStorage中的對象提取出來,并展現到界面上
    // 確保存儲的 keyname 對應的值為轉換對象,否則JSON.parse會報錯
    function loadAll(){  
        var list = document.getElementById("list");  
        if(localStorage.length>0){  
            var result = "<table border='1'>";  
            result += "<tr><td>別名</td><td>網站名</td><td>網址</td></tr>";  
            for(var i=0;i<localStorage.length;i++){ 
                var keyname = localStorage.key(i);  
                var str = localStorage.getItem(keyname);  
                var site = JSON.parse(str);  
                result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";  
            }  
            result += "</table>";  
            list.innerHTML = result;  
        }else{  
            list.innerHTML = "數據為空...";  
        }  
    }  
    </script>

 

上面是JSON.stringify轉換的結果

下面是JSON.parse轉換結果

來源:itnose

上一篇: 圓弧和扇形的加載動畫-遁地龍卷風

下一篇: 小程序·云開發釋放四大能力,“人人都是開發者”時代到來!

分享到: 更多
彩票软件稳赚高收益 五分时时彩怎么玩 重庆时时1980网址 球深比分网即时比分007 河内5分彩手机全天计划软件 彩票店承包合同 七乐彩历史比较结果 七乐彩走势图近30期 七乐彩摇奖视频直播 腾讯分分计划软件手机版 体彩六码遗漏统计 十五码复式二中二多少组 福彩双色球胆拖计算 必发指数网500wan 输了45万如何回血上岸 时时彩组六全包技巧