日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

HTML5本地存储之Web Storage篇

發(fā)布時間：2024/4/13 HTML 27 豆豆
生活随笔 收集整理的這篇文章主要介紹了 HTML5本地存储之Web Storage篇 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

Web Storage是HTML5引入的一個非常重要的功能，在前端開發(fā)中經(jīng)常用到，可以在客戶端本地存儲數(shù)據(jù)，類似HTML4的cookie，但可實(shí)現(xiàn)功能要比cookie強(qiáng)大的多， cookie大小被限制在4KB ， Web Storage官方建議為每個網(wǎng)站5MB 。Web Storage又分為兩種：
  • ?sessionStorage
  • ?localStorage

從字面意思就可以很清楚的看出來，sessionStorage將數(shù)據(jù)保存在session中，瀏覽器關(guān)閉也就沒了；而localStorage則一直將數(shù)據(jù)保存在客戶端本地，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會過期的；不管是sessionStorage，還是localStorage，可使用的API都相同，常用的有如下幾個方法：

  • ?保存數(shù)據(jù)：localStorage.setItem( key, value ); ? ? ?sessionStorage.setItem( key, value );
  • ?讀取數(shù)據(jù)：localStorage.getItem( key ); ? ??sessionStorage.getItem( key ); ?
  • ?刪除單個數(shù)據(jù)：localStorage.removeItem( key ); ? ??sessionStorage.removeItem( key );
  • ?刪除所有數(shù)據(jù)：localStorage.clear( ); ? ??sessionStorage.clear( );
  • ?得到某個索引的key：localStorage.key( index ); ? ??sessionStorage.key( index );

    • 兩個都有屬性 length 表示key 的個數(shù)，也即 key 長度：
    var keyLength1 =?localStorage.length; ?var keyLength2 ?=?sessionStorage.length;?

    如上，key 和 value 都必須為字符串，換言之，web Storage的API只能操作字符串。

    web storage的瀏覽器支持情況的判斷：

    在使用web storage時首先判斷是否支持該功能，有些版本瀏覽器不支持（如IE7及之前的版本不支持），只有支持才可以使用，判斷方法如下：

    [javascript]? view plain copy
  • if(window.localStorage){??//或者?window.sessionStorage?????
  • ????alert("瀏覽支持localStorage")???
  • }else{??????
  • ????alert("瀏覽暫不支持localStorage")???
  • }???
  • ??
  • //或者???
  • if(typeof?window.localStorage?==?'undefined')?{??//或者?window.sessionStorage???
  • ????alert("瀏覽暫不支持localStorage")???
  • }??

    • 接下來，我們 通過Web Storage開發(fā)一個簡單的通訊錄小程序，以演示相關(guān)API的使用方法 ；我們要實(shí)現(xiàn)如下功能：

    1,錄入聯(lián)系人，聯(lián)系人有姓名、手機(jī)號碼2個字段，以手機(jī)號作為key存入localStorage；
    2,根據(jù)手機(jī)號碼，查找機(jī)主；
    3,列出當(dāng)前已保存的所有聯(lián)系人信息；

    首先，準(zhǔn)備一個簡單的HTML頁面，如下：

    [html]? view plain copy
  • <!DOCTYPE?HTML>????
  • <html>????
  • <head>????
  • ????<meta?charset="utf-8"/>????
  • ????<title>HTML5本地存儲之Web?Storage篇</title>????
  • </head>????
  • <body>????
  • ????<div?style="border:?2px?dashed?#ccc;width:320px;text-align:center;">???????
  • ????????<label?for="user_name">姓名：</label>????
  • ????????<input?type="text"?id="user_name"?name="user_name"?class="text"/>????
  • ????????<br/>????
  • ????????<label?for="mobilephone">手機(jī)：</label>????
  • ????????<input?type="text"?id="mobilephone"?name="mobilephone"/>????
  • ????????<br/>????
  • ????????<input?type="button"?onclick="save()"?value="新增記錄"/>????
  • ????????<hr/>????
  • ????????<label?for="search_phone">輸入手機(jī)號：</label>????
  • ????????<input?type="text"?id="search_phone"?name="search_phone"/>????
  • ????????<input?type="button"?onclick="find()"?value="查找機(jī)主"/>????
  • ????????<p?id="find_result"><br/></p>????
  • ????</div>????
  • ????<br/>????
  • ????<div?id="list">????
  • ????</div>????
  • </body>????
  • </html>??
    • 要實(shí)現(xiàn)聯(lián)系人的保存，只需要簡單實(shí)現(xiàn)如下JS方法即可： [javascript]? view plain copy
  • //保存數(shù)據(jù)????
  • function?save(){????
  • ????var?mobilephone?=?document.getElementById("mobilephone").value;????
  • ????var?user_name?=?document.getElementById("user_name").value;????
  • ????if(window.localStorage){???
  • ?????????localStorage.setItem(mobilephone,user_name);????
  • ????}else{??
  • ?????????alert("瀏覽器還不支持?web?storage?功能");??
  • ????}??
  • }??

    • 要實(shí)現(xiàn)查找機(jī)主，則實(shí)現(xiàn)如下JS方法：

    [javascript]? view plain copy
  • //查找數(shù)據(jù)????
  • function?find(){????
  • ????var?search_phone?=?document.getElementById("search_phone").value;????
  • ????var?name?=?"";??
  • ????if(window.localStorage){???
  • ?????????localStorage.getItem(search_phone);????
  • ????}else{??
  • ????????alert("瀏覽器還不支持?web?storage?功能");??
  • ????return;?//采用其他處理方式???
  • ????}??
  • ????var?find_result?=?document.getElementById("find_result");????
  • ????find_result.innerHTML?=?search_phone?+?"的機(jī)主是："?+?name;????
  • }???
    • 要展現(xiàn)所有已保存的聯(lián)系人信息，則需要使用localStorage.key(index)方法，如下： [javascript]? view plain copy
  • //將所有存儲在localStorage中的對象提取出來，并展現(xiàn)到界面上????
  • function?loadAll(){????
  • ????var?list?=?document.getElementById("list");????
  • ????if(?!window.localStorage?){???????????
  • ????????alert("瀏覽器還不支持?web?storage?功能");??
  • ????return;?//可進(jìn)行其他處理??
  • ????}??
  • ????if(localStorage.length>0){????
  • ????????var?result?=?"<table?border='1'>";????
  • ????????result?+=?"<tr><td>姓名</td><td>手機(jī)號碼</td></tr>";????
  • ????????for(var?i=0;i<localStorage.length;i++){????
  • ????????????var?mobilephone?=?localStorage.key(i);????
  • ????????????var?name?=?localStorage.getItem(mobilephone);????
  • ????????????result?+=?"<tr><td>"+name+"</td><td>"+mobilephone+"</td></tr>";????
  • ????????}????
  • ????????result?+=?"</table>";????
  • ????????list.innerHTML?=?result;????
  • ????}else{????
  • ????????list.innerHTML?=?"目前數(shù)據(jù)為空，趕緊開始加入聯(lián)系人吧";????
  • ????}????
  • }???

    • 問題：如上的演示，都只有2個字段，姓名和手機(jī)號碼，如果要存入更為豐富的聯(lián)系人信息，比如公司名稱、家庭地址等，如何實(shí)現(xiàn)呢？Web Storage不是只能處理字符串嗎？此時，可以利用JSON的stringify()方法，將復(fù)雜對象轉(zhuǎn)變成字符串，存入Web Storage中；當(dāng)從Web Storage中讀取時，可以通過JSON的parse()方法再轉(zhuǎn)換成JSON對象；

    如下簡單演示增加了公司屬性的聯(lián)系人保存JS代碼：

    [javascript]? view plain copy
  • //保存數(shù)據(jù)????
  • function?save(){????
  • ????var?contact?=?new?Object;????
  • ????contact.user_name?=?document.getElementById("user_name").value;????
  • ????contact.mobilephone?=?document.getElementById("mobilephone").value;????
  • ????contact.company?=?document.getElementById("company").value;????
  • ????var?str?=?JSON.stringify(contact);??//需要引用相關(guān)的JSON包??
  • ????if(window.localStorage){???
  • ????????localStorage.setItem(contact.mobilephone,str);????
  • ????}else{??
  • ????????alert("瀏覽器還不支持?web?storage?功能");??
  • ????return;?//采用其他處理方式???
  • ????}??
  • ????loadAll();????
  • }????
  • ??
  • //將所有存儲在localStorage中的對象提取出來，并展現(xiàn)到界面上????
  • function?loadAll(){????
  • ????var?list?=?document.getElementById("list");????
  • ????if(?!window.localStorage?){???????????
  • ????????alert("瀏覽器還不支持?web?storage?功能");??
  • ????return;?//可進(jìn)行其他處理??
  • ????}??
  • ????if(localStorage.length>0){????
  • ????????var?result?=?"<table?border='1'>";????
  • ????????result?+=?"<tr><td>姓名</td><td>手機(jī)</td><td>公司</td></tr>";????
  • ????????for(var?i=0;i<localStorage.length;i++){????
  • ????????????var?mobilephone?=?localStorage.key(i);????
  • ????????????var?str?=?localStorage.getItem(mobilephone);????
  • ????????????var?contact?=?JSON.parse(str);????
  • ????????????result?+=?"<tr><td>"+contact.user_name+"</td><td>"+contact.mobilephone+"</td><td>"+contact.company+"</td></tr>";????
  • ????????}????
  • ????????result?+=?"</table>";????
  • ????????list.innerHTML?=?result;????
  • ????}else{????
  • ????????list.innerHTML?=?"目前數(shù)據(jù)為空，趕緊開始加入聯(lián)系人吧";????
  • ????}????
  • } ?

    • 轉(zhuǎn)載于:https://my.oschina.net/u/2249714/blog/646706

    總結(jié)

    以上是生活随笔為你收集整理的HTML5本地存储之Web Storage篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。