HTML5 Web Storage大揭秘：饼干升级版，数据如丝般顺滑

2024-04-05 技术资讯推广

这篇文章主要介绍了html5web本地存储实例详细说明的相关资料,需要的朋友可以参考下要展现所有已保存的联系人信息，则需要使用localStorage.key(index)方法，如下：如下简单演示增加了公司属性的联系人保存JS代码：

Web Storage介绍

HTML5 Web Storage蛮厉害的，能存数据在你电脑上，比HTML4的饼干高级多了。它有两个小伙伴：sessionStorage和localStorage，但各自有不同用处！尽管他们俩的API（加项目、取项目、删项目）都是一样的，但如果浏览器关掉，sessionStorage立马消失无踪，只有本地存储还坚持不变。不过这玩意儿只支持字符串类型。

开发通讯录小程序

让我们开一个通讯录小程序，详细教大家怎样用Web Storage API！要搞明白以下这几条哦～

先请告诉我你朋友名叫啥和他们常用哪个号码，然后用这一串数字直接写进你的手机里，这样以后找起来就能轻松多了。

2.根据手机号码查找联系人信息；

3.列出当前已保存的所有联系人信息。

HTML代码编写

首先搞定HTML代码，让通讯录的页面像图上那样出现。

保存联系人信息

为了实现保存联系人信息的功能，我们可以编写如下JS方法：

javascript
直接把值赋给键当指定的"本地存储"就好了。

这样做就能轻而易举地把朋友们的姓名与电话塞到手机里了！

HTML5本地存储之WebStorage篇姓名：
手机：

输入手机号：

查找机主

如果需要根据手机号码查找机主，则可以实现如下JS方法：

HTML5 Web Storage大揭秘：饼干升级版，数据如丝般顺滑

来，记住这个号码，说不定待会儿还能用上！

用getItem方法，直接就能查到电话号码对应的朋友了！

functionsave(){   
varmobilephone=document.getElementById("mobilephone").value;   
varuser_name=document.getElementById("user_name").value;   
localStorage.setItem(mobilephone,user_name);   
} //用于保存数据

展示所有联系人信息

想看看你手机里存了哪些人？就用咱们的 localStorage.key(index)，不管什么人，都能给你翻出来。看了就全明白了~

存储复杂对象

//查找数据   
functionfind(){   
varsearch_phone=document.getElementById("search_phone").value;   
varname=localStorage.getItem(search_phone);   
varfind_result=document.getElementById("find_result");   
find_result.innerHTML=search_phone+"的机主是："+name;   
}

想存联系人信息？比如企业名称地址之类的？很简单，先将它们变成字符串（借助JSON.stringify()），然后往Web Storage里丢就行了。要用的话，再借助JSON.parse()复原回原来的JSON格式咯~

HTML5 Web Storage大揭秘：饼干升级版，数据如丝般顺滑

添加公司属性

下面是一个简单演示增加了公司属性的联系人保存JS代码：

var contact ={

//将所有存储在localStorage中的对象提取出来，并展现到界面上   
functionloadAll(){   
varlist=document.getElementById("list");   
if(localStorage.length>0){   
varresult="";   
result+="姓名手机号码";   
for(vari=0;i<localStorage.length;i++){   
varmobilephone=localStorage.key(i);   
varname=localStorage.getItem(mobilephone);   
result+=""+name+""+mobilephone+"";   
}   
result+="";   
list.innerHTML=result;   
}else{   
list.innerHTML="目前数据为空，赶紧开始加入联系人吧";   
}   
}

name:”张三”,

phoneNumber:”18888888888″,

HTML5 Web Storage大揭秘：饼干升级版，数据如丝般顺滑