HOME/Articles/

web storage api

Author
KevinSu
Published
2016/02/24
Updated
2022/01/14
F2EsessionStoragelocalStorage
Article Outline

项目中想加入 webStorage 减小网络开销，提高加载速度，增强用户体验，想系统的看下 web storage方面的文章！

<!-- more -->

Web Storage API

参考文章

早上在几个前端同事的桌子上翻到的 HTML5高级程序设计 相关的基础知识看第9章补充的。然后搜索下网络知识：

  1. HTML5 localStorage本地存储实际应用举例

  2. localStorage、sessionStorage用法总结

    不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

  3. 本博客零散优化点汇总

  4. 使用 SRI 增强 localStorage 代码安全

  5. Web移动端使用localStorage缓存Js和css文件 _ _ 推荐 _ _

  1. 基于 postMessage 和 localStorage 的跨域本地存储方案

  2. 【译】在本地存储中保存图片和文件 _ _ 推荐 _ _

  1. 基于 postMessage 和 localStorage 的跨域本地存储方案

  2. Storing images and files in IndexedDB

  3. Saving images and files in localStorage

实践

参考 上面的文章 5 对 所有的js 和 css 进行localStorage 缓存，每个缓存文件的链接可以通过v=new Date().getTime() 进行细化的版本控制，需要更新的添加 参数，不需要的不更新

Next

  1. localStorage 本地存储 的require('js') 模式的调用
20160401 更新
  1. “高三”笔记之动态JS、动态样式

关于 application manifest

  1. manifest 和 application cache

  2. HTML5 离线存储实战之manifest（附缓存整个文件夹的方法）

  3. MDN 使用应用缓存 够详尽！

2016-04-18

  1. 手机百度localstorage细粒度缓存介绍

  2. 手机百度前端工程化之路

疑问

1. application cache 数据量的大小？

不像localStorage 多数资料给出明确的大小是 5M, 查询的资料中很少提及 application cache 的大小，目前找到的文章中形成了两张说法：

  1. 应用缓存初级使用指南

    网站的缓存数据量不得超过 5 MB。不过，如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制

  2. [HTML5]Application Cache使用中需要注意的事项

    Safari桌面浏览器(Mac以及 Windows)没有限制 Mobile Safari限制为10MB Chrome限制为5MB Android浏览器对应用程序缓存大小没有限制 Firefox桌面版有无限的应用程序缓存大小 Opera的应用程序缓存大小可以由用户管理，但有一个默认大小50MB

    各种浏览器的的 数据量的大小是不一样的。查看 html5 Application cache API 官方的文件，也是支持各个浏览器自己定义的 允许的disk space 大小，甚至允许用户管理。

    _ _ 最终的方案 ：通用的application cache disk space 限制在5M _ _

_ _ tip: _ _ chrome://appcache-internals/ 可以查看chorme 中 application cache 的使用大小，亲自证实不止 5M

2. 想缓存的文件太多了，手写很麻烦，怎么办呢？
  1. 详解HTML5中的manifest缓存使用 中使用 grunt-manifest自动生成manifest文件。因为我的构建工具使用的是gulp 所以去npmjs 搜索了gulp-manifest，感兴趣的看官方文档吧，很详尽！

3. js控制 缓存文件的更新

参考：应用缓存初级使用指南

    // Check if a new cache is available on page load.
    window.addEventListener('load', function(e) {

      window.applicationCache.addEventListener('updateready', function(e) {
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
          // Browser downloaded a new app cache.
          // Swap it in and reload the page to get the new hotness.
          window.applicationCache.swapCache();
          if (confirm('A new version of this site is available. Load it?')) {
            window.location.reload();
          }
        } else {
          // Manifest didn't changed. Nothing new to server.
        }
      }, false);

    }, false);
4. 注意事项

  1. HTML5 使用application cache 接口实现离线数据缓存

    1. 站点离线存储的容量限制是5M
    2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
    3. 引用manifest的html必须与manifest文件同源，在同一个域下
    4. 在manifest中使用的相对路径，相对参照物为manifest文件
    5. CACHE MANIFEST字符串应在第一行，且必不可少
    6. 系统会自动缓存引用清单文件的 HTML 文件
    7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
    8. FALLBACK中的资源必须和manifest文件同源
    9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
    10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
    11. 当manifest文件发生改变时，资源请求本身也会触发更新

  2. manifest 和 application cache

    1. 备用项如果发生命中,则也会被缓存.
    1. 明示项和备用项优先级高于白名单.
    1. 白名单使用通配符"_ ". 则会进入白名单的open状态. 这种状态下.所有不在相关Cache区域出现的url都默认使用HTTP相关缓存头策略.
    1. 白名单使用具体的前缀匹配或更具体的URL,则都属于blocking状态.这种状态下,白名单所匹配的,非Cache区域出现的URL,与open的_ 匹配的结果一致,但是不在白名单中,又不在整个manifest的资源,会block.也就是访问，加载不能.

阅读列表 [2015.02.22 - 2015.02.28]

1. npm构建工具

  1. 我为何放弃Gulp与Grunt，转投npm scripts 上,

  2. 我为何放弃Gulp与Grunt，转投npm scripts 中,

  3. 我为何放弃Gulp与Grunt，转投npm scripts 下

    使用的gulp 的项目构建工具，有时间可以试下直接npm 构建。webpack 中可以使用npm 管理js 包依赖管理

    微博上的相关讨论： 入口

2. WebRTC

  1. 实现WebRTC的几个想法
BACK TO TOP
© KevinSu 2019
Powered by GitPress.io
Sponsored by Quail.ink