前端页面利用localStorage设置缓存方案

最新推荐文章于 2024-09-09 14:03:58 发布

淡淡然一下

最新推荐文章于 2024-09-09 14:03:58 发布

阅读量6.7k

点赞数 1

分类专栏：方案设计文章标签： h5 缓存

本文链接：https://blog.csdn.net/yhaibo222/article/details/53495209

版权

本文介绍了前端如何利用localStorage进行页面缓存，包括存储限制、存储方法如save()和saveAssignCount()，以及数据过期判断和读取策略。同时强调了缓存适用场景和注意事项，如缓存数据类型和超时时间设定。

摘要由CSDN通过智能技术生成

前端页面利用localStorage设置缓存方案

localStorage的存储空间大致在5M左右，各大浏览器略有差别。我再chrome 54中测试能放下 5233962 字节，该值并不精确，通过每次往localStorage中插入一个大字符串，到达上线报错之后再取总长度得到。
LocalStorageClient类提供两个方法来存储缓存数据
1. save(key, data, flag)
2. saveAssignCount(preKey, variableKey, count, data, flag)
  - save()函数直接存储数据项；
  - saveAssignCount()函数存储数据项前会先判断同一个preKey的缓存条数是否大于count，如果大于则先删除最早存储的数据项;
  - 比如活动详情只想缓存10条，就可以使用saveAssignCount函数存储，preKey为cache_activity_detail_，variableKey为活动id
  - 缓存数据时会将用户信息和当前时间戳一同存储，以用于判断数据是否过期和数据是否有效（在同一个mall下面）
提供load(key, overtime)函数来读取缓存数据，超时时间为分钟。如果找到符合要求的数据则返回，否则返回null。数据超时或者不在同一个mall下面则删除当前key缓存。
提供全局参数cacheEnable来控制是否启用缓存，此参数可用从服务端获取或者直接前端指定。不启动缓存时save、saveAssignCount函数直接返回false，load函数直接返回null
缓存数据项尽量为不变或者变化很少的数据。列表页不适用缓存或者只缓存不带查询条件的第一页且缓存时间为分钟级，避免用户不通强刷用。
缓存的使用比较简单，请求服务器之前先获取缓存，如果缓存数据不为空则不请求服务器，如果为空则请求服务器成功之后将结果缓存起来。下面是云雀项目知识库文章详情中缓存的用法

App.Controllers.ArticleDetail = function() {
   

    this.getArticleDetail = function(articleId) {
   
        var CACHE_ARTICLE_DETAIL_KEY = "cache_article_detail_"; // cache key
        var result = localStorageClient.load(CACHE_ARTICLE_DETAIL_KEY + articleId, 24 * 60); // load cache, 缓存24小时
        if (result != null) {
            // 获取到缓存直接渲染
            articleDetailController.renderDetail(result);
            return;
        }
        if (!isOnline) {
            // 离线，从参数中获取
            result  = {data: takeOutParamObject()};
            articleDetailController.renderDetail(result);
        } else {
            var detailModel = new BaseModel({businessUrl : "wiki/article_detail.do"});
            //调用fetch时请求的url为model里面封装好的url
            detailModel.fetch({
                reset: true,
                dataType: 'jsonp',               //固定值
                jsonp: 'callback',               //值可变，名称随意，但一般设为callback就可以了