WebApp本地存储 (离线缓存策略策略）
开发离线应用的缓存方法大概有4种（如下safari开发工具中的resources所示）
1.cookies（略）：传统储存策略。缺点很明显：储存的容量过小，而且很容易被各种软件当垃圾清除，如360等。
2.Application Cache资源缓存：在html中指定一个manifest文件，给文件中罗列出需要缓存的资源文件列表。浏览器根据资源列表对资源文件缓存。
3.Dom Storage：这一种基于key/value的格式。
DOM Storage 分为两类：sessionStorage 和 localStorage。除了以下区别外，这两类存储对象的功能是完全一致的。
- sessionStorage 用于存储与当前浏览器窗口关联的数据。窗口关闭后，sessionStorage 中存储的数据将无法使用。
- localStorage 用于长期存储数据。窗口关闭后，localStorage 中的数据仍然可以被访问。所有浏览器窗口可以共享 localStorage 的数据.
- <!DOCTYPE html>
- <html manifest="tetris.php">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>
- <link rel="apple-touch-startup-image" href="startup.png" />
- <title>appdig</title>
- <script src="jquery.js"></script>
- <span style="white-space:pre"> </span><style type="text/css">
- <span style="white-space:pre"> </span>body,div,ul,li,p,span,img{
- <span style="white-space:pre"> </span>margin:0px;
- <span style="white-space:pre"> </span>padding:0px;
- <span style="white-space:pre"> </span>}……
<!DOCTYPE html>是用来声明它是一个html5文档。
- <?php
- header('Content-Type: text/cache-manifest');
- readfile('tetris.manifest');
先发送header头部，确定这是一个text/cache-manifest类型文件。再把tetris.manifest中的列表都进来。
- CACHE MANIFEST
- index.html
- jquery.js
text/cache-manifest manifest
WebApp本地存储 (离线缓存策略策略）相关推荐
- IndexedDB浏览器本地存储、缓存、数据库、介绍
目录 1.前言 2.IndexedDB简介 3.IndexedDB使用场景 4.IndexedDB特点 4.1.非关系型数据库 NoSql 4.2.持久化存储 4.3.异步操作 4.4.支持事务 4. ...
- HTML5基础扩展——地理位置、本地存储、缓存
HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...
- WebStorage之浏览器的本地存储（结合案例）
目录 前言 一,WebStorage 二,localStorage 2.1 存储 2.2 读取 2.3 删除 2.4 清除全部 2.5 代码 三,sessionStorage 3.1 用法 3.2 区 ...
- 离线缓存占内存吗_彻底弄懂浏览器缓存策略
浏览器缓存策略对于前端开发同学来说不陌生,大家都有一定的了解,但如果没有系统的归纳总结,可能三言两语很难说明白,甚至说错,尤其在面试过程中感触颇深,很多候选人对这类基础知识竟然都是一知半解,说出几个概 ...
- 本地存储和离线缓存的作用和区别
前言 前端的存储方式有:localStorage.sessionStorage.cookie.UserData.webSQL.indexeddb.HTML5离线存储等.各个存储方式有各自的优缺点,本文 ...
- 浏览器，渲染，页面优化，存储，缓存，同源策略，跨域问题
一.浏览器渲染 1.浏览器渲染原理 原文链接:https://blog.csdn.net/qq_45952585/article/details/124069123前端项目性能优化方案有哪些_前端性能 ...
- app 缓存html页面,HTML5本地存储VS App缓存离线网站浏览
ylerjen.. 17 AppCache使用清单文件来定义应用程序应该存储哪些文件(您可以缓存文件和资源,如HTML页面,JS脚本,CSS样式,图像......) LocalStorage将存储数据 ...
- 三种本地存储策略的区别
前端常用的三种本地存储策略是什么呢? cookie sessionStorage localStorage cookie 在 h5 之前,本地存储的主要方式就是 cookie ,cookie可以实现少 ...
- openfire client聊天消息交互和存储离线（在线）消息记录策略
[0]如何将离线消息存档,且在接收者上线之后,推送消息到接收者 发送方发送消息 -> 检测接收方是否在线 -> -> y -> 发送在线消息 -> 发送成功后,存档到消息 ...
最新文章
- python 通过shutil.move移动图片出错xe5\xb8\xb8\xe7
- 学长毕业日记 :本科毕业论文写成博士论文的神操作20170412
- 思考一下消息中间件的设计
- python先返回再处理_python xpath解析返回对象怎么处理
- php使用hset报错,redis中set和hset的区别和使用场景
- SizeClass和Autolayout
- ThreatARMOR添加零日恶意软件防御功能
- 电商需求分析mysql建表_电商-专题表 - 数据库设计 - 数据库表结构 - 果创云
- AccuMark 7.6.2 格柏服装软件
- Kafka实战之整合Flume和Kafka完成实时数据采集
- lot物联网场景通用架构分享
- ColorPix 简单好用的屏幕取色小工具
- 小米手机电池恢复代码_小米手机隐藏技巧，你真的会用吗？别再浪费如此强大的功能了...
- 51nod 1534 棋子游戏（博弈）
- mac下解决无法往U盘内复制文件的问题
- matter.js学习笔记（八）--Composites.newtonsCradle()制造牛顿摆
- 基于虚拟机的VxWorks实验平台设计与实现(读研时的一篇论文)
- 聊聊旷厂黑科技 | 五彩斑斓的黑，旷视“算”出来了！
- java实现图片的压缩且保留图片尺寸不变
- API 接口大全之 1688