当前位置: 代码迷 >> HTML/CSS >> (Html 五 新特性)localStorage 介绍
  详细解决方案

(Html 五 新特性)localStorage 介绍

热度:682   发布时间:2012-08-30 09:55:54.0
(Html 5 新特性)localStorage 介绍
   在Html 5之前,由于没有localStorage,我们要实现记录密码或者自动登录的功能,基本只能依靠Cookie,而现在只能手机已经十分普遍,现在手机上浏览网页无法通过Cookie来实现类似功能,于是Html 5 给我们提供了一个非常好用的行特性localStorage。
   localStorage的功能和Cookie差不多,主要用来记录一些script中需要使用的信息,它的构造和Map十分类似,提供了key/value的查找方式,所以使用起来非常方便。
   localStorage最常用的API有三个,分别是setItem(key, value), getItem(key),remove(key)。通过这三个方法名字也能知道它们各自的作用。顺便给出一些我写的一个方法:
    var saveKeyValue = function(key, value) {
        if (typeof localStorage !== undefined) {
            try {
                localStorage.setItem(key, value);
            } catch (e) {
                if (e == QUOTA_EXCEEDED_ERR) {
                    alert('Quota exceeded');
                }
            }
        }
    };

    var getValueByKey = function(key) {
        var value = localStorage.getItem(key);
        return value == null ? 'empty!' : value;
    };

    var removeKey = function(key) {
        localStorage.removeItem(key);
    };
    
    saveKeyValue('name', 'Jobs');
    alert(getValueByKey('name'));
    removeKey('name');
    alert(getValueByKey('name'));


上面的代码大家也可以到以下地址进行查看(最好使用chrome或者其他支持html5的浏览器)
http://jsfiddle.net/kiddYu619/YAAR8/
  相关解决方案