webapp和一般的手机网页版相比，有两【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。个最大的区别，一个是api交互，一个是本本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】地化数据存储。今天主要来谈一谈本地化数据【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net存储方案。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】什么是本地化数据存储【本文首发于唐霜的博客】
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】webapp在构建界面时，需要数据，通过【未经授权禁止转载】【版权所有，侵权必究】和api进行交互，获取数据后，即可利用这本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net些数据进行页面的渲染。但是除了从api获原创内容，盗版必究。【原创内容，转载请注明出处】取数据外，也需要将数据存放在本地，以备不本文版权归作者所有，未经授权不得转载。【转载请注明来源】时之需。本地数据包含两类，一类是客户端数【本文受版权保护】【版权所有，侵权必究】据，一类是缓存。客户端数据包括app的设【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。置项目、用户个人资料、与api交互时所需【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】要的鉴权（认证）信息等。缓存数据时在和a【原创不易，请尊重版权】【作者：唐霜】pi交互完之后，把结果暂时保存在本地，当未经授权，禁止复制转载。【原创内容，转载请注明出处】第二次请求同一个api接口的时候，根据一【转载请注明来源】【本文首发于唐霜的博客】些条件判断，可以直接使用本地的缓存作为页转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】面渲染的数据。
原创内容，盗版必究。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。说的简单一点，就是webapp本身要在客原创内容，盗版必究。【未经授权禁止转载】户端（通常是手机）上保存数据，这就是本地转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。化数据存储。通常，本地化数据存储有关系型著作权归作者所有，禁止商业用途转载。【作者：唐霜】数据和非关系型数据，关系型数据使用我们熟本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】悉的sql类数据存储来实现，非关系型数据【本文首发于唐霜的博客】原创内容，盗版必究。使用我们熟悉的key-value类数据存原创内容，盗版必究。【本文首发于唐霜的博客】储来实现。
原创内容，盗版必究。【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netwebapp应该如何选择本地化数据存储方【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】式
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】首先，我们在对待webapp项目的时候，【关注微信公众号：wwwtangshuangnet】【转载请注明来源】要把它和PC web网站区分开。虽然we转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netbapp也依托于web，但是从开发和架构本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】上，它更像是native app，也就是转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】原生应用。作为app，和web网站相比有【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。一些局限：
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。- 不能完善的实现基于浏览器的http请求和转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】响应 【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
- 由于上面这点，不能像web网站一样，基于【版权所有，侵权必究】【未经授权禁止转载】服务端session来保持用户登录 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。
- app向服务端的请求，没有浏览器所包含的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。host、referer等信息 本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】【未经授权禁止转载】
- 要完成http请求，必须借助第三方开发包 【原创不易，请尊重版权】未经授权，禁止复制转载。【本文首发于唐霜的博客】【本文受版权保护】【原创内容，转载请注明出处】
基于上面这些问题，实现app和api的数【作者：唐霜】本文作者：唐霜，转载请注明出处。据交互时，必须一个一个的去解决。weba【转载请注明来源】著作权归作者所有，禁止商业用途转载。pp借助的是浏览器，原本是可以绕过上面这本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。些问题的，但是在设计api时，api的架【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】构首先是面向native app的，所以【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。api本身也在设计中要解决这些问题，而这【版权所有，侵权必究】原创内容，盗版必究。个设计，反而让webapp失去了借助浏览【转载请注明来源】著作权归作者所有，禁止商业用途转载。器实现http交互的能力。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】一旦出现上面这些情况，webapp的数据【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。处理起来就比较麻烦，必须完全按照nati未经授权，禁止复制转载。【原创不易，请尊重版权】ve app的设计风格来处理数据。
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【本文首发于唐霜的博客】为了适应更多的使用场景，我们通过html【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。5本身提供的一些本地化数据存储和cook本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ie作为辅助来实现webapp的本地化数未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net据存储。
【转载请注明来源】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。- cookie：保存在浏览器临时目录中的小【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】颗粒数据存储模式，以文本文件的形式存储，未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net可以通过记事本等编辑器打开查看，最大不超【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】过5K，而且有生命周期（可以自己设置），【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。也可以通过浏览器被清除。微信中，cook本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netie可以被正常使用，但是每次微信重启，或【未经授权禁止转载】【未经授权禁止转载】者微信内部机制限制，cookie都会被清本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】空。 本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。
- localStorage：HTML5推崇本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】的一种本地化数据存储形式，是HTML5时原创内容，盗版必究。本文作者：唐霜，转载请注明出处。代的一种新机制，支持HTML5的大部分浏【未经授权禁止转载】原创内容，盗版必究。览器都支持该功能。localStorag【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。e可以实现本地数据的永久化存储，在没有调原创内容，盗版必究。本文作者：唐霜，转载请注明出处。用localStorage.remove原创内容，盗版必究。【原创内容，转载请注明出处】Item之前，这个数据可以一直存在。当然原创内容，盗版必究。本文作者：唐霜，转载请注明出处。，如果浏览器本身崩溃，该值虽然大部分情况【本文受版权保护】【本文受版权保护】下保留，偶尔也会丢失。微信高版本里面该功本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。能可以正常使用，重启微信该值仍然存在。 【作者：唐霜】【版权所有，侵权必究】原创内容，盗版必究。【本文受版权保护】
- localSession：也是HTML5【原创不易，请尊重版权】【转载请注明来源】的新特性，在使用方法上和localSto【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】rage一样，在存储上和cookie很像【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，但是唯一一点不同的事，cookie可以未经授权，禁止复制转载。【本文首发于唐霜的博客】用户自己设置生命周期，而localSes【原创不易，请尊重版权】原创内容，盗版必究。sion不能自己设置生命周期，它是一个会【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。话级别的数据，就像服务端的session未经授权，禁止复制转载。未经授权，禁止复制转载。一样，当用户没有连续使用会话时，会话就会【原创不易，请尊重版权】未经授权，禁止复制转载。断开，localSession就没了，得【本文受版权保护】原创内容，盗版必究。重新去生成。 【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】
- sqlite：原本HTML5加入的新功能本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，可以用javascript实现sqli著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。te的操作，构建本地化关系数据库。可是在【本文首发于唐霜的博客】【转载请注明来源】最近的一些反馈中，sqlite正在被移出【本文受版权保护】【原创不易，请尊重版权】HTML5的标准。当然，从目前浏览器的支【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】持而言，大部分支持HTML5的浏览器，也【作者：唐霜】【版权所有】唐霜 www.tangshuang.net支持sqlite，因此，我们可以在web【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】app中使用sqlite来保存一些必要的【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】关系型数据。 转载请注明出处：www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】
在大部分情况下，我们主要使用localS原创内容，盗版必究。本文作者：唐霜，转载请注明出处。torage和cookie来实现数据的本未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net地化存储。它们都可以经过处理后，实现丰富【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】的key-value数据存储。不过由于c未经授权，禁止复制转载。【作者：唐霜】ookie的容量限制在5K，所以使用时还【原创内容，转载请注明出处】未经授权，禁止复制转载。是有所限制。
【未经授权禁止转载】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netjavascript的cookie操作【访问 www.tangshuang.net 获取更多精彩内容】
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】和服务端语言不同，javascript和【转载请注明来源】本文版权归作者所有，未经授权不得转载。php保存的cookie不在同一个地方，未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net因此javascript创建的cooki未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】e，PHP是读取不到的。javascri【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】pt的cookie被用document.著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。cookie存储起来。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net下面，我们创建一个函数（基于jquery【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】），用来操作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(''));
}
}
在使用的时候，有三个参数，各自都有作用。
【版权所有】唐霜 www.tangshuang.net【关注微信公众号：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了。
【版权所有，侵权必究】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【本文受版权保护】基于jquery的localStorag原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】e操作
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。和cookie不同，localStora【作者：唐霜】【本文首发于唐霜的博客】ge的操作方便得多，只需要用几个get,【版权所有，侵权必究】转载请注明出处：www.tangshuang.netset,remove方法就可以完成操作。
【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】【转载请注明来源】【本文受版权保护】但是，在一些特殊情况下，localSto著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】rage会失效，例如浏览器开启了隐私模式【本文受版权保护】本文版权归作者所有，未经授权不得转载。，禁止在本地存储localStorage【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。数据，例如iPhone上的Safari默【原创不易，请尊重版权】【本文受版权保护】认是不支持localStorage，需要【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】用户开启设置。但是一半而言，用户并不知道原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。怎么开启，因此，在这种情况下，我们可以暂【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】时用cookie进行代替。不过在微信中正未经授权，禁止复制转载。【作者：唐霜】常使用，无需担心。
未经授权，禁止复制转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】下面我们写一个jquery的方法来操作：
【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。$.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来进行处理，保证著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。在localStorage被禁用的情况下本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net，可以使用cookie来代替。local【本文首发于唐霜的博客】【本文首发于唐霜的博客】Storage没有domain, pat著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.neth选项，因此第三个参数是数字，用来表示生本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net命周期。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】var values = $.storage(); // 获取全部数据
$.storage(null); // 清空全部数据
var value = $.storage('name'); // 获取键名为name的值
$.storage('name',null); // 删除键名name的值
$.storage('name','value'); // 添加或设置值
$.storage('name','value',3600); // 在设置值的时候，给一个生命周期值
通过上面这些方法，我们就可以方便的在we【版权所有，侵权必究】【未经授权禁止转载】bapp中设置、取出、删除本地化存储的数【本文首发于唐霜的博客】原创内容，盗版必究。据，供webapp使用（或缓存）。
【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net而且，在上面两个方法中，我们都加入了JS【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】ON方法，即把数据进行JSON格式化后存【转载请注明来源】【原创内容，转载请注明出处】储，取出的时候，再进行JSON反解析。这【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。样可以保证我们可以直接存储字典型数据，比【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】如：
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】本文作者：唐霜，转载请注明出处。var cat = {
'name' : 'kitty',
'age' : 10
}
$.storage('cat',cat);
这样我们在取出’cat【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。217;之后，可以直接使用对象属性的方式原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net获取cat.name, cat.age这【原创内容，转载请注明出处】原创内容，盗版必究。些值。
【转载请注明来源】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】2016-04-08 12107
想问下博主在「基于jquery的localStorage操作」中，在获取全部数据及获取过期数据时，「$.kv()」是什么意思？是 jquery 的方法？
这个文章太久远了，我也不记得了，可能是哪里抄来的有问题。
推荐使用hell-storage https://github.com/tangshuang/hello-storage