离线存储方式汇总

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是把双刃剑,用的好的话,那将获益良多,用不好将是用户的一个灾难。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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