Web Storage
来源:互联网 发布:有声学英语软件 编辑:程序博客网 时间:2024/04/25 08:14
Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。Web Storage又分为两种:
接下来,我们通过Web Storage开发一个简单的通讯录小程序,以演示相关API的使用方法;我们要实现如下功能:
问题:如上的演示,都只有2个字段,姓名和手机号码,如果要存入更为丰富的联系人信息,比如公司名称、家庭地址等,如何实现呢?Web Storage不是只能处理字符串吗?此时,可以利用JSON的stringify()方法,将复杂对象转变成字符串,存入Web Storage中;当从Web Storage中读取时,可以通过JSON的parse()方法再转换成JSON对象;
- sessionStorage
- localStorage
从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地,除非主动删除数据,否则数据是永远不会过期的;不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个方法:
- 保存数据:localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
- 读取数据:localStorage.getItem( key ); sessionStorage.getItem( key );
- 删除单个数据:localStorage.removeItem( key ); sessionStorage.removeItem( key );
- 删除所有数据:localStorage.clear( ); sessionStorage.clear( );
- 得到某个索引的key:localStorage.key( index ); sessionStorage.key( index );
两个都有属性 length 表示key 的个数,也即 key 长度:
var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length;
如上,key 和 value 都必须为字符串,换言之,web Storage的API只能操作字符串。
web storage的浏览器支持情况的判断:
在使用web storage时首先判断是否支持该功能,有些版本浏览器不支持(如IE7及之前的版本不支持),只有支持才可以使用,判断方法如下:
接下来,我们通过Web Storage开发一个简单的通讯录小程序,以演示相关API的使用方法;我们要实现如下功能:
1,录入联系人,联系人有姓名、手机号码2个字段,以手机号作为key存入localStorage;
2,根据手机号码,查找机主;
3,列出当前已保存的所有联系人信息;
首先,准备一个简单的HTML页面,如下:
要实现查找机主,则实现如下JS方法:
要展现所有已保存的联系人信息,则需要使用localStorage.key(index)方法,如下:问题:如上的演示,都只有2个字段,姓名和手机号码,如果要存入更为丰富的联系人信息,比如公司名称、家庭地址等,如何实现呢?Web Storage不是只能处理字符串吗?此时,可以利用JSON的stringify()方法,将复杂对象转变成字符串,存入Web Storage中;当从Web Storage中读取时,可以通过JSON的parse()方法再转换成JSON对象;
如下简单演示增加了公司属性的联系人保存JS代码:
0 0
- Web Storage
- WEB Storage
- Web Storage
- Web Storage
- Web Storage
- Web Storage
- Web Storage
- Web Storage
- Web Storage
- web storage
- Web Storage
- web storage
- Web Storage
- Web Storage
- Web Storage
- web storage
- Web Storage
- Web Storage
- Node.js初识
- C++ getline()
- iOS Provisioning Profile(Certificate)与Code Signing详解
- cas学习地址
- maven的配置信息
- Web Storage
- MongoDB基础语法
- 真正用来学习微机原理及汇编的好书!
- HttpServlet
- Eclipse常用快捷键
- PE文件详解(九)
- Java Swing
- C++任意进制转任意进制的转换函数实现
- 机器学习03-代价函数与梯度下降算法(二)