webapp和一般的手机网页版相比，有两【版权所有】唐霜 www.tangshuang.net【转载请注明来源】个最大的区别，一个是api交互，一个是本本文作者：唐霜，转载请注明出处。【本文受版权保护】地化数据存储。今天主要来谈一谈本地化数据【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。存储方案。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

什么是本地化数据存储【本文首发于唐霜的博客】

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】

webapp在构建界面时，需要数据，通过【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。和api进行交互，获取数据后，即可利用这转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net些数据进行页面的渲染。但是除了从api获本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】取数据外，也需要将数据存放在本地，以备不【作者：唐霜】【转载请注明来源】时之需。本地数据包含两类，一类是客户端数转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】据，一类是缓存。客户端数据包括app的设著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net置项目、用户个人资料、与api交互时所需本文作者：唐霜，转载请注明出处。【转载请注明来源】要的鉴权（认证）信息等。缓存数据时在和a【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netpi交互完之后，把结果暂时保存在本地，当本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。第二次请求同一个api接口的时候，根据一本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net些条件判断，可以直接使用本地的缓存作为页【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。面渲染的数据。

未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

说的简单一点，就是webapp本身要在客转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。户端（通常是手机）上保存数据，这就是本地著作权归作者所有，禁止商业用途转载。【作者：唐霜】化数据存储。通常，本地化数据存储有关系型原创内容，盗版必究。本文作者：唐霜，转载请注明出处。数据和非关系型数据，关系型数据使用我们熟【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】悉的sql类数据存储来实现，非关系型数据【未经授权禁止转载】未经授权，禁止复制转载。使用我们熟悉的key-value类数据存【版权所有，侵权必究】【原创内容，转载请注明出处】储来实现。

本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【转载请注明来源】

webapp应该如何选择本地化数据存储方【本文受版权保护】【原创内容，转载请注明出处】式

【本文受版权保护】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

首先，我们在对待webapp项目的时候，原创内容，盗版必究。【转载请注明来源】要把它和PC web网站区分开。虽然we【未经授权禁止转载】【原创不易，请尊重版权】bapp也依托于web，但是从开发和架构未经授权，禁止复制转载。【版权所有，侵权必究】上，它更像是native app，也就是本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。原生应用。作为app，和web网站相比有转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。一些局限：

【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】

• 不能完善的实现基于浏览器的http请求和【本文受版权保护】【未经授权禁止转载】响应
本文作者：唐霜，转载请注明出处。【本文受版权保护】【转载请注明来源】【版权所有，侵权必究】
• 由于上面这点，不能像web网站一样，基于未经授权，禁止复制转载。【作者：唐霜】服务端session来保持用户登录
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】
• app向服务端的请求，没有浏览器所包含的著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】host、referer等信息
【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
• 要完成http请求，必须借助第三方开发包
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】未经授权，禁止复制转载。

基于上面这些问题，实现app和api的数【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。据交互时，必须一个一个的去解决。weba著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】pp借助的是浏览器，原本是可以绕过上面这著作权归作者所有，禁止商业用途转载。【转载请注明来源】些问题的，但是在设计api时，api的架原创内容，盗版必究。转载请注明出处：www.tangshuang.net构首先是面向native app的，所以著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】api本身也在设计中要解决这些问题，而这未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个设计，反而让webapp失去了借助浏览本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】器实现http交互的能力。

【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【本文受版权保护】转载请注明出处：www.tangshuang.net

一旦出现上面这些情况，webapp的数据【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net处理起来就比较麻烦，必须完全按照nati【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】ve app的设计风格来处理数据。

【本文受版权保护】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

为了适应更多的使用场景，我们通过html【本文受版权保护】【版权所有】唐霜 www.tangshuang.net5本身提供的一些本地化数据存储和cook原创内容，盗版必究。原创内容，盗版必究。ie作为辅助来实现webapp的本地化数本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net据存储。

【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

• cookie：保存在浏览器临时目录中的小本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】颗粒数据存储模式，以文本文件的形式存储，【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。可以通过记事本等编辑器打开查看，最大不超【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。过5K，而且有生命周期（可以自己设置），【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】也可以通过浏览器被清除。微信中，cook未经授权，禁止复制转载。未经授权，禁止复制转载。ie可以被正常使用，但是每次微信重启，或未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】者微信内部机制限制，cookie都会被清未经授权，禁止复制转载。【版权所有，侵权必究】空。
【版权所有】唐霜 www.tangshuang.net【作者：唐霜】本文版权归作者所有，未经授权不得转载。【转载请注明来源】【原创不易，请尊重版权】
• localStorage：HTML5推崇【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】的一种本地化数据存储形式，是HTML5时【转载请注明来源】著作权归作者所有，禁止商业用途转载。代的一种新机制，支持HTML5的大部分浏【作者：唐霜】本文版权归作者所有，未经授权不得转载。览器都支持该功能。localStorag【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。e可以实现本地数据的永久化存储，在没有调【转载请注明来源】【版权所有，侵权必究】用localStorage.remove【本文受版权保护】原创内容，盗版必究。Item之前，这个数据可以一直存在。当然【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】，如果浏览器本身崩溃，该值虽然大部分情况【原创不易，请尊重版权】未经授权，禁止复制转载。下保留，偶尔也会丢失。微信高版本里面该功【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】能可以正常使用，重启微信该值仍然存在。
【版权所有，侵权必究】【未经授权禁止转载】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。
• localSession：也是HTML5【未经授权禁止转载】原创内容，盗版必究。的新特性，在使用方法上和localSto【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。rage一样，在存储上和cookie很像未经授权，禁止复制转载。【作者：唐霜】，但是唯一一点不同的事，cookie可以著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。用户自己设置生命周期，而localSes未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netsion不能自己设置生命周期，它是一个会本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。话级别的数据，就像服务端的session原创内容，盗版必究。【本文首发于唐霜的博客】一样，当用户没有连续使用会话时，会话就会【本文受版权保护】【本文受版权保护】断开，localSession就没了，得【本文受版权保护】【本文首发于唐霜的博客】重新去生成。
未经授权，禁止复制转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【本文受版权保护】【作者：唐霜】
• sqlite：原本HTML5加入的新功能转载请注明出处：www.tangshuang.net【未经授权禁止转载】，可以用javascript实现sqli【版权所有，侵权必究】【作者：唐霜】te的操作，构建本地化关系数据库。可是在著作权归作者所有，禁止商业用途转载。【转载请注明来源】最近的一些反馈中，sqlite正在被移出【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.netHTML5的标准。当然，从目前浏览器的支【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net持而言，大部分支持HTML5的浏览器，也转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】支持sqlite，因此，我们可以在web【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netapp中使用sqlite来保存一些必要的未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。关系型数据。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】

在大部分情况下，我们主要使用localS【本文首发于唐霜的博客】【本文受版权保护】torage和cookie来实现数据的本著作权归作者所有，禁止商业用途转载。【本文受版权保护】地化存储。它们都可以经过处理后，实现丰富本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的key-value数据存储。不过由于c转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ookie的容量限制在5K，所以使用时还【转载请注明来源】本文作者：唐霜，转载请注明出处。是有所限制。

原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】

javascript的cookie操作【版权所有】唐霜 www.tangshuang.net

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net【版权所有，侵权必究】

和服务端语言不同，javascript和【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netphp保存的cookie不在同一个地方，原创内容，盗版必究。【本文首发于唐霜的博客】因此javascript创建的cooki【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】e，PHP是读取不到的。javascri【转载请注明来源】未经授权，禁止复制转载。pt的cookie被用document.本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】cookie存储起来。

【未经授权禁止转载】【转载请注明来源】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

下面，我们创建一个函数（基于jquery本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。），用来操作cookie：

【本文受版权保护】【版权所有，侵权必究】【版权所有，侵权必究】原创内容，盗版必究。

$.cookie = function(key,value,options) {
    var defaults = {
        expires: 7*24*3600,
        path: '/',
        domain: ''
    };
    // get all
    if(key === undefined) {
        var result = null;
        var cookies = document.cookie ? document.cookie.split('; ') : [];

        for(var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decodeURIComponent(parts.shift());
            var cookie = parts.join('=');

            if(cookie.indexOf('"') === 0) {
                cookie = cookie.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
            }

            cookie = decodeURIComponent(cookie.replace(/\+/g, ' '));

            result[name] = JSON.parse(cookie);
        }

        return result;
    }
    // clear
    else if(key === null) {
        var cookies = document.cookie.split(";");

        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
        }
    }
    // read
    else if(value === undefined) {
        var result = null;
        var cookies = document.cookie ? document.cookie.split('; ') : [];

        for(var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decodeURIComponent(parts.shift());
            var cookie = parts.join('=');

            if (key && key === name) {
                if(cookie.indexOf('"') === 0) {
                    cookie = cookie.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
                }

                cookie = decodeURIComponent(cookie.replace(/\+/g, ' '));
                result = JSON.parse(cookie);

                break;
            }
        }

        return result;
    }
    // delete
    else if(value === null) {
        $.cookie(key,'',{expires: '-1'});
    }
    // add or update
    else {
        if(typeof options == 'string' || typeof options == 'number') options = {expires: options}; // 如果第三个参数是数字
        options = $.extend(defaults,options);

        if(typeof options.expires === 'number') {
            var seconds = options.expires, t =  new Date();
            options.expires = t;
            options.expires.setTime(+ t + seconds / 24 / 3600 * 864e+5);
        }

        return (document.cookie = [
            encodeURIComponent(key) + '=' + encodeURIComponent(JSON.stringify(value)),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path    ? '; path=' + options.path : '',
            options.domain  ? '; domain=' + options.domain : '',
            options.secure  ? '; secure' : ''
        ].join(''));
    }
}

在使用的时候，有三个参数，各自都有作用。

未经授权，禁止复制转载。【本文受版权保护】【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

var cookies = $.cookie(); // 获取所有cookie
$.cookie(null); // 清空所有cookie
var value = $.cookie('name'); // 获取键名为'name'的值
$.cookie('name',null); // 删除键名为'name'的cookie
$.cookie('name','value'); // 添加或更新键名name=>value
$.cookie('name','value',3600); // 第三个参数表示生命周期，以秒为单位
$.cookie('name','value',{path:window.location.href,doamin:window.location.host,expires:3600}); // 第三个参数可以通过这种形式来设置cookie生效的域名和路径

这样，我们就可以非常方便的操作cooki【原创不易，请尊重版权】【本文受版权保护】e了。

未经授权，禁止复制转载。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

基于jquery的localStorag【作者：唐霜】未经授权，禁止复制转载。e操作

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

和cookie不同，localStora【未经授权禁止转载】原创内容，盗版必究。ge的操作方便得多，只需要用几个get,著作权归作者所有，禁止商业用途转载。【转载请注明来源】set,remove方法就可以完成操作。

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。原创内容，盗版必究。原创内容，盗版必究。【原创不易，请尊重版权】

但是，在一些特殊情况下，localSto【本文首发于唐霜的博客】【转载请注明来源】rage会失效，例如浏览器开启了隐私模式【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，禁止在本地存储localStorage未经授权，禁止复制转载。【原创内容，转载请注明出处】数据，例如iPhone上的Safari默原创内容，盗版必究。【原创不易，请尊重版权】认是不支持localStorage，需要未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。用户开启设置。但是一半而言，用户并不知道【版权所有，侵权必究】转载请注明出处：www.tangshuang.net怎么开启，因此，在这种情况下，我们可以暂【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。时用cookie进行代替。不过在微信中正【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。常使用，无需担心。

【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

下面我们写一个jquery的方法来操作：

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。

$.storage = function(key,value,expires) {
    var Storage = function(){
        try {
            localStorage.setItem('storage','');
            localStorage.removeItem('storage');
            return localStorage;
        }
        catch(e) { // 浏览器隐私模式下，例如iphone的Safari默认情况下，localstorage无法使用，所以使用cookie来代替
            var cookies = document.cookie.split(";");
            return {
                length : function(){
                    return cookies.length;
                }(),
                key : function(i){
                    var parts = cookies[i].split('=');
                    var name = decodeURIComponent(parts.shift());
                    return name;
                },
                getItem : function(key) {
                    return $.cookie(key);
                },
                setItem : function(key,value) {
                    $.cookie(key,value,{expires:expires || 365*24*3600});
                },
                removeItem : function(key) {
                    $.cookie(key,null);
                },
                clear : function() {
                    $.cookie(null);
                }
            };
        }
    }();

    var data = {},time = parseInt((new Date()).getTime() / 1000);    // 获取全部数据
    if(key === undefined) {
        var k;
        for(var i = 0;i < Storage.length;i ++) {
            k = Storage.key(i);
            value = $.kv(k);
            if(!value) continue;
            data[k] = value;
        }
        return data;
    }
    // clear
    else if(key === null) {
        Storage.clear();
    }
    // read
    else if(value === undefined) {
        data = Storage.getItem(key);
        if(!data) return false;

        data = JSON.parse(data);
        if(data.expires && time > data.expires) { // 如果过期
            $.kv(key,null);
            return false;
        }
        data = data.value;
        return data;
    }
    // delete
    else if(value === null) {
        Storage.removeItem(key);
    }
    // set:add or update
    else {
        data = {
            time: time,
            expires: expires ? time + expires : 0,
            value: value
        };
        data = JSON.stringify(data);

        Storage.setItem(key,data);
    }
}

这操作中，已经通过try来进行处理，保证【版权所有，侵权必究】转载请注明出处：www.tangshuang.net在localStorage被禁用的情况下【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。，可以使用cookie来代替。local【原创内容，转载请注明出处】原创内容，盗版必究。Storage没有domain, pat本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】h选项，因此第三个参数是数字，用来表示生原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。命周期。

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【作者：唐霜】原创内容，盗版必究。

var values = $.storage(); // 获取全部数据
$.storage(null); // 清空全部数据
var value = $.storage('name'); // 获取键名为name的值
$.storage('name',null); // 删除键名name的值
$.storage('name','value'); // 添加或设置值
$.storage('name','value',3600); // 在设置值的时候，给一个生命周期值

通过上面这些方法，我们就可以方便的在we【作者：唐霜】【作者：唐霜】bapp中设置、取出、删除本地化存储的数【版权所有】唐霜 www.tangshuang.net【转载请注明来源】据，供webapp使用（或缓存）。

【原创内容，转载请注明出处】【版权所有，侵权必究】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

而且，在上面两个方法中，我们都加入了JS本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ON方法，即把数据进行JSON格式化后存【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。储，取出的时候，再进行JSON反解析。这原创内容，盗版必究。未经授权，禁止复制转载。样可以保证我们可以直接存储字典型数据，比原创内容，盗版必究。【本文受版权保护】如：

未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

var cat = {
  'name' : 'kitty',
  'age' : 10
}
$.storage('cat',cat);

这样我们在取出’cat【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net217;之后，可以直接使用对象属性的方式原创内容，盗版必究。【版权所有，侵权必究】获取cat.name, cat.age这著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。些值。

【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】

2016-04-08 12198