轩枫阁

首页 / Web前端 / HTML / 文本框数据自动保存

文本框数据自动保存

在新浪微博的新鲜事微博输入框中输入文字,这时如果没发布但是已经离开页面,等再回到该页面时,微博发布框中的内容还是存在的。同样,QQ空间、百度贴吧等也是有此类功能,但实现的方法可能不太一样。如数据可以存在服务器上,但是总是在输入文字,那服务器压力不是很大?用cookie有大小限制不可轻易使用。所以本地存储是个不错的选择,这时候大家是不是顿时产生想法:HTML5本地存储~下面详细介绍下

本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。

20110515054811428

一、本地存储概况

目前支持以下方法,实现浏览器端的本地存储:

1、cookie ;

每个cookie的大小不能超过4K。

Cookie数:

  • IE7跟IE8限制为50个。
  • Firefox限制为50个。
  • Opera限制30个
  • Safari/Chrome/WebKit没有限制

缺点:容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全。每次的http请求,cookie都会包含在报头里发送给服务器,cookie在http请求中是明文传递的。

 

2、flash LSO

local shared objects (LSOs).

Flash的LSOs 就如同Web浏览器中的cookies,它们被一些开发者称为“超级cookies”,因为LSOs可以存储大量数据,且存储和读取的都是原生的ActionScript数据类型。LSOs 默认的空间大小100 KB, 用户可以通过Flash Player’s Settings Manager控制LSOs的使用空间大小,来严格限制被使用的空间。

 缺点:要在页面中引入特定的swf和js文件,增加额外负担,处理繁琐;还是有部分机子没有flash运行环境。

3、Google Gears(SQlite)

一个嵌入浏览器的小型数据库插件,使用类似SQL语句进行查询。

建议:Google的离线方案,已经停止更新,官方推荐使用html5的localStorage方案。

4、userData

是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5)、XP(IE6、IE7),Vista(IE7)下都是可以正常使用的。

单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB,所以如果考虑到各种情况的话,单个文件最好能控制64KB以下。

5、Html5本地存储:localStorage和sessionStorage

相对于上述本地存储方案,localStorage有自身的优点:容量大、易用、强大、原生支持;缺点是兼容性差些(chrome,  safari, firefox,IE 9,IE8都支持 localStorage,主要是IE8以下版本不支持)、安全性也差些(所以请勿使用localStorage保存敏感信息)。

二、兼容方案

1、永久存储

使用window.localStorage和userData(IE5.5-8.0)

2、会话临时存储

使用window.sessionStorage和userData

userData的expires属性设置或者获取 userData behavior 保存数据的失效日期,不设置则为永久。

三、使用方法

1.UserDaATA

  • getAttribute() 获取指定的属性值。
  • load(object) 从 userData 存储区载入存储的对象数据。
  • removeAttribute() 移除对象的指定属性。
  • save(object) 将对象数据存储到一个 userData 存储区。
  • setAttribute() 设置指定的属性值。

要使用userData存储功能,必须先建立一个HTML标签,然后将behavior:url(‘#default#userData’)样式属性加上去,等于说userData是寄存于HTML标签的,当然不是所有标签都是可以的,仅限于部分标签。

2.localStorage
非常通俗易懂的接口:

  • localStorage.getItem(key):获取指定key本地存储的值
  • localStorage.setItem(key,value):将value存储到key字段
  • localStorage.removeItem(key):删除指定key本地存储的值

留意localStorage存储的值都是字符串类型,在处理复杂的数据时,比如json数据时,需要借助JSON类,将json字符串转换成真正可用的json格式。

四、demo页面及测试

demo地址http://www.xuanfengge.com/demo/201308/autosave/

测试

chrome和firebug都可以查看存储的数据
唯一需要注意的是,本地存储的这些数据,是共用的,也就是说数据不是根据页面的url来存储,而是根据主域名。所以比如不同的url访问相同的文件,但是又不想共用同一套数据的时候,就得根据url设置不同的name(一般是id),来保证数据在页面的唯一

5~LXFXQ]DX`I2X_[NGS{8LC

HTML代码

js源码

 

本文标题:文本框数据自动保存 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
301/456
303/456

相关文章

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]