离线存储方式汇总

1、Web SQL Database
虽然还有浏览器支持,是唯一的关系数据库结构的存储,但W3C以及停止对其的维护和发展,所以这里我们也不再对其进行介绍
2、localStorage(有用)
先介绍最简单的存储方式LocalStorage,代码如下,几乎不用介绍就是Key-Value的简单键值对存储结构,Web Storage除了localStorage的持久性存储外,还有针对本次回话的sessionStorage方式,一般情况下localStorage较为常用
localStorage和cookies相比,在浏览器中存储的容量更大。另外最大的特点是不会附带在http请求中传给后台,不会像cookies一样导致http头部变大影响传输性能。基于这个原因,localStorage适合缓存一些常用的数据,无需平凡的像后台请求数据。

假设业务场景中有某段数据是被多个地方用到的,最直观的做法是:

var data = localStorage.getItem('cacheKey');
if (!data) { // 如果data为空,发出请求
 $.ajax({
   url: 'xxxx',
   success: function(response) {
     if(response.code === 1) {  // success!
        loccalStorage.setItem('cacheKey', response.data);
     }
        // 其他业务处理。。。          
   }
})      
}

如果接口设计是统一的,可以统一封装自己的ajax方法,拦截请求

function myAjax() {
    var arg = arguments[0];
    var realSuccess = arg.success;
    var realBeforeSend = arg.beforeSend;
    arg.success = function(response) {
    if(response.code === 1) {
        localStorage.setItem(cacheKey /*需要根据请求参数生成不一样的key*/ , response.data);
    }
    realSuccess && realSuccess.apply(null, arguments);
    }
    $.ajax(arg);
}

如上面代码,同理可以增加beforeSend拦截请求判断是否在缓存中读取。这样业务逻辑就更少的受到影响
3、Cookie常见的(有用)
4、IndexedDB(有用)
本地数据库
5、FileSystem API(有用)
突破沙箱访问我们本地的文件系统
6、Application Cache
1.更新机制:一旦你采用了manifest之后,你将不能清空这些缓存,只能更新缓存,或者得用户自己去清空这些缓存。这里一旦更新到错误的页面,将被缓存起来,而无法有机会访问到正确的页面,那么就只能杯具了,所以保证更新的页面资源的正确性显得尤为重要。另外电信之类的运营商很喜欢在一些流量大的网站进行劫持广告,这样的话,很可能在更新过程将这些广告给缓存起来了,那就杯具了。
2.manifest本身的编写要求比较严格,要注意换行跟路径文件名之类的问题。不然缓存将无效。
3.如果更新的资源中有一个资源更新失败了,将导致全部更新失败,将用回上一版本的缓存。
4.二次更新的问题,即在更新新版本过程中,用户需要第一次时访问的还是旧的资源,需要第二次进去才是新的资源。如果此时后台接口发生变化,访问第一次时的旧数据很可能将出现兼容问题。
5.限制大小问题,一般是最多缓存5mb,不过一般是够用的。
6.回滚问题,这个可以参考之前的一篇《慎用manifest》的文章,大体是从无到有,又想回滚到无的情形。总体来说,appcache是把双刃剑,用的好的话,那将获益良多,用不好将是用户的一个灾难。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • 转载:H5缓存机制浅析-移动端Web加载性能优化【干货】 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录...
    meng_philip123阅读 11,480评论 6 48
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 总体情况 h5之前,存储主要是用cookies。 cookies缺点:有在请求头上带着数据,大小是4k之内。主Do...
    单纯的土豆阅读 728评论 0 1
  • 本文介绍本地数据存储的选型。简单总结一些查询到的关于本地数据存储的技术。 控制台展示前端存储 Chrome: 前端...
    谢大见阅读 9,038评论 1 8
  • 《聚餐》 同事们特别的聚餐 一切都是新的 单位,店面,同事…… 心情特别好 吃稀饭也笑着吃 一盘盘烤肉 长得不一样...
    金书js阅读 381评论 2 5