轩枫阁

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

文本框数据自动保存

阅读：13358 评论：1 作者：ivan 分类：HTML、Javascript、Web前端、授人以渔

在新浪微博的新鲜事微博输入框中输入文字，这时如果没发布但是已经离开页面，等再回到该页面时，微博发布框中的内容还是存在的。同样，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代码

1
2
<textarea id="editor"></textarea>
<input type="button" class="button" value="发布" id="save">

js源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
var editor = document.getElementById("editor");
        editor.value="";
    var UserData = {
        userData : null,
        name : location.hostname,
        //this.name = "www.xuanfengge.com";
 
        init:function(){
            // IE7下返回true，其他浏览器返回false
            if (!UserData.userData) {
                try {
                    UserData.userData = document.createElement('INPUT');
                    UserData.userData.type = "hidden";
                    UserData.userData.style.display = "none";
                    UserData.userData.addBehavior ("#default#userData");
                    document.body.appendChild(UserData.userData);
                    var expires = new Date();
                    expires.setDate(expires.getDate()+365);
                    UserData.userData.expires = expires.toUTCString();
                } catch(e) {
                    return false;
                }
            }
            return true;
        },
 
        setItem : function(key, value) {
            // IE7下的set
            if(UserData.init()){
                UserData.userData.load(UserData.name);
                UserData.userData.setAttribute(key, value);
                UserData.userData.save(UserData.name);
            }
        },
 
        getItem : function(key) {
          // IE7下的get
            if(UserData.init()){
              UserData.userData.load(UserData.name);
              return UserData.userData.getAttribute(key)
            }
        },
 
        remove : function(key) {
            // IE7下的remove
            if(UserData.init()){
              UserData.userData.load(UserData.name);
              UserData.userData.removeAttribute(key);
              UserData.userData.save(UserData.name);
            }
 
        }
    };
 
    window.onbeforeunload=function(){
        // 离开本页之前保存数据
        if(!window.localStorage){
            UserData.setItem('editor-text',editor.value);
        }else{
            localStorage.setItem('editor-text',editor.value);
        }
 
    };
    window.onload=function(){
        // 加载页面时判断是否有数据并加载
        if(!window.localStorage){
            if(UserData.getItem('editor-text')==undefined) {
                editor.value="";
            }else{
                editor.value=UserData.getItem('editor-text');
            }
        }else{
            if(localStorage.getItem('editor-text')!=null){
                editor.value=localStorage.getItem('editor-text');
            }else{
                editor.value="";
            }
        }
 
    };
    // 点击发表时删除数据
    document.getElementById("save").onclick=function(){
        editor.value="";
        if(!window.localStorage){
            UserData.remove('editor-text');
        }else{
            localStorage.removeItem('editor-text');
        }
    };

 

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

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

如果觉得我的文章对您有用，欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
315/470
317/470

相关阅读

文章评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间