localstorage 本地存储

define(function() {
    var win = window,
        doc = document,  

        decode = function(s) {
            // 参考jquery cookie的实现: https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js
            if (s.indexOf('"') === 0) {
                s = s.slice(1, - 1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
            }
            try {
                return decodeURIComponent(s);
            } catch (e) {
                return null;
            }
        },
        encode = encodeURIComponent,  

        isSupportLocalStorage = (function() {
            try {
                var support = 'localStorage' in win && win['localStorage'] !== null,
                    test = {
                        k: 'test key',
                        v: 'test value'
                    };
                if (support) {
                    localStorage.setItem(test.k, test.v);
                    support = test.v === localStorage.getItem(test.k);
                }
                return support;
            } catch (e) {
                return false;
            }
        }()),  

        stringify = function(v) {
            if (!_.isString(v)) {
                v = JSON.stringify(v);
            }
            return encode(v);
        },  

        validateCookieName = function(name) {
            if (!_.isString(name) || name === '') {
                throw new TypeError('Cookie name must be a non-empty string!');
            }
        },  

        // TODO: 不支持localStorage时换用cookie存储
        // 现在在某些浏览器下可能存在cookie数量的限制
        // 之后可能的优化是使用subcookie的方式: https://developer.yahoo.com/yui/cookie/#subcookies
        s = isSupportLocalStorage ? localStorage : {
            setItem: function(k, v, days) {
                validateCookieName(k);  

                // 默认cookie中的结果缓存7天
                days = days || 7;
                var expires = new Date();
                expires.setDate(expires.getDate() + days);  

                v = _m.utils.evaluate(v);
                if (_.isArray(v)) {
                    v = v[0];
                    expires = new Date(parseInt(v[1], 10));
                }  

                k = stringify(k);
                v = stringify(v);  

                // 高端浏览器中一般合并字符用+比用join('')更高效
                // 参考: http://photo.weibo.com/2785671884/wbphotos/large/photo_id/3453950944633013?refer=weibofeedv5
                doc.cookie = k + '=' + v + '; expires=' + expires.toGMTString();
            },  

            getItem: function(k) {
                validateCookieName(k);  

                k = stringify(k) + '=';  

                var v = null,
                    cookie = doc.cookie,
                    start = cookie.indexOf(k);  

                if (start > -1) {
                    var end = cookie.indexOf(';', start);
                    if (end === -1) {
                        end = cookie.length;
                    }
                    v = decode(cookie.substring(start + k.length, end));
                }  

                return v;
            },  

            removeItem: function(k) {
                this.setItem(k, '', - 1);
            }
        },  

        prefix = '_BM:';  

    return {
        isSupportLocalStorage: isSupportLocalStorage,  

        set: function(k, v, expires) {
            if (_.isNumber(expires)) {
                expires = +new Date() + expires;
            }
            s.setItem(prefix + k, JSON.stringify({
                value: v,
                expires: expires
            }));
        },  

        get: function(k) {
            var v = JSON.parse(s.getItem(prefix + k)),
                expires;  

            if (!v) {
                return;
            }  

            expires = parseInt(v.expires, 10);
            v = v.value;  

            if (expires) {
                if (+new Date() < expires) {
                    return v;
                }
                this.remove(k);
            }  

            return v;
        },  

        remove: function(k, v) {
            if (v) {
                try {
                    this.set(k, _.difference(this.get(k), v));
                } catch (e) {}
            } else {
                s.removeItem(prefix + k);
            }
        },  

        add: function(k, v, options) {
            var h = this.get(k),  

                defaults = {
                    type: 'set',
                    limit: 10
                },
                opts = _.extend(defaults, options),  

                type = opts.type,
                expires = opts.expires,
                limit = opts.limit;  

            // TODO: 有潜在的bug, 比如之前存储的是array类型
            if (!_.isArray(h)) {
                h = _.isUndefined(h) && [] || [h];
            }  

            if (type === 'set' && _.indexOf(h, v) !== -1) {
                return;
            }  

            if (_.isNumber(limit) && limit > 0) {
                h = _.first(h, limit - 1);
            }  

            h.unshift(v);  

            this.set(k, h, expires);
        }
    };
});
   
时间: 2024-11-05 17:18:42

localstorage 本地存储的相关文章

html5之Localstorage本地存储

Localstorage本地存储基本用法   如何创建和访问 localStorage   <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> 上面就创建了一个localStorage.   我们再来做一个刷新页面,增加访问次数的功能!很简单,代码如下:   <scr

html5中Localstorage本地存储的例子

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. if(window.localStorage){  alert('This browser supports localStorage'); }else{  alert('This browser does NOT supp

HTML5 LocalStorage 本地存储原理详解

  说到Web开发中的本地存储,大家最先想到的应该就是Cookies这玩意了,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用ja vasc ript的用户不存在了一样. userData是IE的东西,垃圾.现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用.再之后Google推出了Gear

详解HTML5 LocalStorage本地存储用法

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样. userData是IE的东西,垃圾.现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用.再之后Google推出了G

HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据可被同源的每个窗口或者标签页共享,兼容性很好,使用最多的存储方式. Session Storage:只要浏览器窗口不关闭就会一直存在,不应该把真正有价值的东西放在里面,数据会保存到存储它的窗口或者标签页关闭时,数据只在构建他们的窗口或者标签页可见 Indexed Database:在Indexed

html5中本地存储替代cookie:qext.LocalStorage例子

 背景 先看看各种本地存储的变革: Cookies:浏览器均支持,容量为4KB UserData:仅IE支持,容量为64KB Flash:100KB Google Gears SQLite :需要插件支持,容量无限制 LocalStorage:HTML5,容量为5M 现准备在项目中试图取代cookie的实现,基本分析如下: 每次和服务器端进行交互,cookie都会在请求中被携带,cookie过多,也造成带宽的浪费 cookie的容量很小,或许无法满足当今互联网的本地存储需求 在IE8+.Fire

HTML5的本地存储方案LOCALSTORAGE的例子

本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Open Database等. html5的本地存储localStorage 以下是各种本地存储方案的特点: Cookie: 在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全,Cookie 的内容会随着页面请求一并发往服

深入分析html5本地存储localStorage功能

1.添加localStorage localStorage.setItem("key","value"); //以"key"为名称存储一个值"value" 2.获取localStorage localStorage.getItem("key");//获取名称为"key"的值 3.删除localStorage localStorage.removeItem("key")

HTML5之本地存储localstorage

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种:   sessionStorage localStorage   从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地