html5的web存储对象,html本地数据存储

　　网络存储是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的饼干，但可实现功能要比甜饼干强大的多，cookie大小被限制在4KB，网络存储官方建议为每个网站5MB。

　　Web Storage又分为两种：

　　本地存储

　　本地存储

　　从字面意思就可以很清楚的看出来，会话存储将数据保存在会议中，浏览器关闭也就没了；而本地存储则一直将数据保存在客户端本地；

　　不管是会话存储，还是本地存储，可使用的应用程序接口都相同，常用的有如下几个（以本地存储为例):

　　保存数据：localStorage.setItem(key，value)；读取数据：本地存储。getitem(key)；删除单个数据：本地存储。移除项目(键)；删除所有数据：本地存储。clear()；得到某个索引的键：本地存储。键(索引)；如上，键和价值都必须为字符串，换言之，网络存储的应用程序接口只能操作字符串。

　　接下来，我们通过网络存储开发一个简单的通讯录小程序，以演示相关应用程序接口的使用方法；我们要实现如下功能：

　　录入联系人，联系人有姓名、手机号码2个字段，以手机号作为键存入本地存储；根据手机号码，查找机主；列出当前已保存的所有联系人信息；首先先写一个简单的超文本标记语言代码

　　XML/HTML代码复制内容到剪贴板！doctype html html head metacharsetmetacharset= utf-8 /title html 5本地存储之网络存储篇/title/head body div style div style= border:2 px虚线# CCC宽度：320像素文本对齐：居中；labelforlabelfor=用户名姓名：/label inputtypeinputtype= text id= user _ name name= user _ name class= text /br/label for= mobile phone 手机：/label inputtypeinputtype= text id= mobile phone name= mobile phone /br/inputtypeinputtype= button onclick= save() value=新增记录/HR/labelforlabelfor= search _ phone 输入手机号：/label inputtypeinputtype= text id= search _ phone name= search _ phone /inputtypeinputtype= button onclick= find() value=查找机主/PID PID= find _ result br//p/div br/divided vid= list /div/body/html写完页面的话，展示效果差不多就是如下图：

　　要实现联系人的保存，只需要简单实现如下射流研究…方法即可：

　　XML/HTML代码复制内容到剪贴板函数save(){ var手机=文档。getelementbyid(“移动电话”).价值；var用户名=文档。getelementbyid(用户名).价值；本地存储. setItem(手机，用户名);}//用于保存数据要实现查找机主，则实现如下射流研究…方法：

　　XML/HTML代码复制内容到剪贴板//查找数据function find(){ varsearch _ phone=document。getelementbyid(“search _ phone”).价值；varname=本地存储。getitem(search _ phone)；var find _ result=document。getelementbyid( find _ result )；查找_结果。innerhtml=search _ phone 的机主是：名称；}

　　要展现所有已保存的联系人信息，则需要使用本地存储.密钥(索引)方法，如下：

　　XML/HTML代码复制内容到剪贴板//将所有存储在本地存储中的对象提取出来，并展现到界面上functionloadAll(){ varlist=document。getelementbyid( list )；如果(本地存储。长度0){ varresult= table border= 1 ；结果=trtd姓名/tdtd手机号码/TD/tr ；for(vari=0；ilocalstorage . length I){ var mobile phone=local storage。关键(一)；varname=本地存储。getitem(手机)；结果=trtd 名称/tdtd 手机/TD/tr ；} result=/table ； list . innerhtml=result } else { list . innerhtml=目前数据为空，赶紧开始加入联系人吧；} }效果如下：

　　问题：在上面的演示中，只有两个字段，姓名和手机号码。如果想存储更丰富的联系方式，比如公司名称，家庭住址，如何实现？Web存储不是只能处理字符串吗？此时，可以使用JSON的stringify()方法将复杂对象转换成字符串，存储在Web存储中；当从Web存储中读取它时，可以通过JSON的parse()方法将其转换为JSON对象。

　　下面的简单演示为公司属性的联系人保存添加了JS代码：

　　XML/HTML代码将内容复制到剪贴板//保存数据函数save(){ var contact=new object；contact . user _ name=document . getelementbyid( user _ name )。价值；contact . mobile phone=document . getelementbyid( mobile phone )。价值；contact . company=document . getelementbyid( company )。价值；varstr=JSON . stringify(contact)；local storage . setitem(contact . mobile phone，str)；loadAll()；}//提取localStorage中存储的所有对象，展示给接口FunctionLoadAll(){ varlist=document . getelementbyid( list )；if(local storage . length 0){ varresult= table border= 1 ；结果=trtd名称/tdtd手机/tdtd公司/TD/tr ；for(vari=0；ilocalStorage.lengthI){ var mobile phone=local storage . key(I)；varstr=local storage . getitem(mobile phone)；var contact=JSON . parse(str)；result= trtd contact . user _ name /tdtd contact . mobile phone /tdtd contact . company /TD/tr)；} result=/table ；list.innerHTML=result}else{ list.innerHTML=当前数据为空，赶紧开始加入联系人；}}效果如下：

　　以上是边肖介绍的Html5 web本地存储实例的详细说明。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。