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