好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

HTML5本地存储之WebStorage篇

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


Web Storage又分为两种:

sessionStorage localStorage


从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;


不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index);


如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。


接下来,我们通过Web Storage开发一个简单的通讯录小程序,以演示相关API的使用方法;我们要实现如下功能:


录入联系人,联系人有姓名、手机号码2个字段,以手机号作为key存入localStorage; 根据手机号码,查找机主; 列出当前已保存的所有联系人信息;


首先,准备一个简单的HTML页面,如下:


[html]

查看更多关于HTML5本地存储之WebStorage篇的详细内容...

  阅读:46次

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://www.haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]