首页
学习
活动
专区
工具
TVP
发布

HTML5离线存储原理

前言 使用HTML5,通过创建cache manifest文件,可轻松创建web应用的离线版本;HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有网络时进行访问。...应用程序缓存为应用带来三个优势 离线浏览—用户可在离线时使用 速度—已经缓存的资源加载的更快 减少服务器负载—浏览器将只从服务器下载更改过的资源 原理和环境 如上面提到的HTML5的离线存储是基于一个新建的....appcache文件的,通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。...之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 就像cookie一样,html5的离线存储也需要服务器环境。.../ 目录中的所有文件: ALLBACK:/html5/ /404.html 第一个 URI 是资源,第二个是替补。

2.7K50
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5离线存储——manifest简介

离线存储的作用 1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2、用户访问本地的缓存文件,通常意味着更快的访问速度 3、仅仅加载被修改过的资源,避免同一资源对服务器多次的请求...404.html 1、 CACHE MANIFEST 写在manifest文件开头 2、#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更改manifest的作用,可以是版本号,时间戳或者...在线的情况下,浏览器发现html头部有manifest属性,会请求manifest文件,如果是第一次访问应用,浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。...那么就会重新下载文件中的资源并进行离线存储。...离线的情况下,浏览器就直接使用离线存储的资源。

3.6K50

HTML5离线存储——manifest简介

本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载 离线存储的作用 1、用户可离线访问应用,这对于无法随时保持联网状态的移动终端用户来说尤其重要 2、用户访问本地的缓存文件...404.html 1、 CACHE MANIFEST 写在manifest文件开头 2、#号开头的是注释,一般会在第二行写个版本号,用来在缓存的文件更新时,更改manifest的作用,可以是版本号,时间戳或者...在线的情况下,浏览器发现html头部有manifest属性,会请求manifest文件,如果是第一次访问应用,浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。...那么就会重新下载文件中的资源并进行离线存储。...离线的情况下,浏览器就直接使用离线存储的资源。

1.9K20

HTML5(三)——Web 本地存储

WebStorage两个主要目标: (1)提供一种在cookie之外存储会话数据的路径。 (2)提供一种存储大量可以跨会话存在的数据的机制。...web存储更加安全与快速,这些数据还不会保存到服务器,还可以存储大量数据而不影响网站性能。 web 存储类型 localStorage - 用于长久保存数据,没有有效期,直到手动清除。...web存储数据应用 应用1:取出本地存储的所有数据,以localStorage为例。 localStorage和sessionStorage是两个对象,类似json。...记住用户登录信息、存草稿、存邮件等经常会使用 localStorage,我们介绍下几种存储方式的区别,可以更好地根据需求选择存储方式。...几种存储方式区别 cookies 和 sessionStorage、localStorage区别如图: 上述看三者存储大小有很大差异,存储内容上也不同,cookie只能保存字符串类型,但sessionStorage

91020

HTML5(三)——Web 本地存储

WebStorage两个主要目标: (1)提供一种在cookie之外存储会话数据的路径。 (2)提供一种存储大量可以跨会话存在的数据的机制。...web存储更加安全与快速,这些数据还不会保存到服务器,还可以存储大量数据而不影响网站性能。 web 存储类型 localStorage - 用于长久保存数据,没有有效期,直到手动清除。...web存储数据应用 应用1:取出本地存储的所有数据,以localStorage为例。 localStorage和sessionStorage是两个对象,类似json。...记住用户登录信息、存草稿、存邮件等经常会使用 localStorage,我们介绍下几种存储方式的区别,可以更好地根据需求选择存储方式。...几种存储方式区别 cookies 和 sessionStorage、localStorage区别如图: 上述看三者存储大小有很大差异,存储内容上也不同,cookie只能保存字符串类型,但sessionStorage

1K10

html5 离线存储 地理信息与本地存储

海拔准确度 : coords.altitudeAcuracy     行进方向 : coords.heading     地面速度 : coords.speed     时间戳...获取位置超时了     数据收集 : json的形式       enableHighAcuracy : 更精确的查找,默认false       timeout : 获取位置允许最长时间...,默认infinity       maximumAge : 位置可以缓存的最大时间,默认0     多次定位请求 : watchPosition(像setInterval)       ...都会请求服务器(头信息)   页面间的cookie是共享   Storage     sessionStorage       session临时回话,从页面打开到页面关闭的时间段窗口的临时存储...,页面关闭,本地存储消失     localStorage       永久存储(可以手动删除数据)     Storage的特点       存储量限制 ( 5M )     客户端完成

1.7K90

HTML5 Web 存储 优于 Cookie 的本地存储方式

它也可以存储大量的数据,而不影响网站的性能 HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage...– 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除 sessionStorage – 用于临时保存同一窗口 (或标签页) 的数据,在关闭窗口或标签页之后将会删除这些数据 这样两种存储对象的区别也就出来了...:localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空 也就是说 localStorage 对象存储的数据没有时间限制...,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除 HTML5 Web 存储的局限性 浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持...HTML5 Web 存储 HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡 HTML5 Web 存储的使用 不管是 localStorage,还是 sessionStorage

84910

前端|HTML5中的网络存储

传统方式使用document.cookie来进行存储,但是由于其存储的空间只有4KB左右,并且需要复杂的操作进行解析,给发开者带来很多不便,为此,HTML5规范提出了网络存储的解决方案。...约20M (3)只能存储字符串,如果要存储JSON对象,可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。...2.2 localStorage实现本地存储 localStorage作为HTML5 Web Storage的API之一,主要的作用是进行本地存储。...).onclick = function() { window.sessionStorage.clear(); }; 3 总结 HTML5...中的两种存储方式都比较实用,我们在设计前端页面时,可以根据相应的用户访问情况预测来增添相应的js,既增加了用户浏览的体验,又能实现存储管理的高效性,合理的利用存储空间。

1.3K10

html5之客户端存储

WebStorage介绍 所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,比如在网站上自动登陆这些功能,其实就是把一些少量的数据存储在浏览器等客户端中,这样可以减少没必要的请求到服务器...WebStorage的三种存储方式 cookie: 广泛使用 存储量4kb左右 会在浏览器和服务器间传递 一般由服务器端创建 可以设置存储时间(默认和session一样) cookie不容易操作 jquery.cookie.js...插件 session(会话)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(浏览器的内存中) 只会由浏览器端创建 存储时间是打开浏览器开始关闭浏览器消失 方法简洁明了 容易操作...local(本地)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(存储在硬盘中) 只会由浏览器端创建 永久存储除非手动删除 方法简介明了 容易操作 localStorage 添加数据...(比较少用) 总结 localStorage和sessionStorage只能存储json 存储的数据不能太多 太多浏览器会卡

1.5K10

第180天:HTML5——本地存储

本地存储 客户端存储数据的方法 cookie 方法 localStorage方法 sessionStorage方法 一、localStorage 1、存储特点: localStorage方法存储的数据没有时间限制...: sessionStorage的方法针对一个session进行数据存储。...存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。...sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。 3....sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效

77540

HTML5】296- 重新复习 HTML5 的 5大存储方式

一、介绍 在 HTML5 规范之前,存储主要是用 cookies 。...本地存储 localstorage 存储方式: 以键值对( Key-Value)的方式存储,永久存储,永不失效,除非手动删除。 大小: 每个域名5M。 支持情况: ?...本地存储 sessionstorage HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空...WebSQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。...IndexedDB 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。

80530

HTML5简明教程(四)Web存储

HTML5的Web存储涉及两部分内容,一是数据存储,支持更多本地存储方案;二是文件读取,支持了File API。 1....本地存储 Web应用中数据存储有两种方式:一是Web服务器,二是客户端存储,也就是本地存储HTML5出现之前,本地存储只有一种方式:cookie。...但是,cookie有着明显的缺点,存储数据量少,会被携带到HTTP请求上增加传输开销......HTML5提供两种新的本地存储方式:localStorage和sessionStorage。...localStorage sessionStorage 生命周期 默认保存在浏览器内存中,浏览器关闭时清除cookies;如果设置expires属性值,将把cookies保存在硬盘中,有效期为expires的值 没有时间限制...HTML5还提供了File API从硬盘上提取文件,交给网页中运行的JavaScript。 HTML5 File API只能读取文件,不能修改或创建文件。

76530

HTML5之客户端存储数据

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 session 的数据存储之前,这些都是由...但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。...在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。...HTML5 使用 JavaScript 来存储和访问数据。 localStorage 方法 localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。...."); sessionStorage 方法 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

1.7K40

数据SCT定律:存储,计算,时间

不过呢,从大数据这个行业来说,我们始终都是在存储,计算和时间进行权衡,博弈以及突破。某种程度上来说,当拥有其中两者,可能很难兼顾第三者。...这个过程中会触发时间问题(也就是数据可见性的延时),也会触发计算的额外消耗,这些计算来源于同步以及涉及到Kafka,MySQL等各个子系统的消耗。...有了存储上的支持,很多其他的事情就会变得简单。...其次是同步方面的问题,我们希望解决的是延时上的问题(时间),传统的模式是利用canal等工具读取binlog到kafka,然后kafka后面接一个计算系统,将数据写入到一个可更新的存储,比如hbase,...第三个是计算的问题,大数据对外提供的一个很重要的功能就是海量数据的分析查询,为了应对各种需求,我们各种武器都上去,计算系统繁多而复杂,时间效率和不一定能达到诉求。

92740

HTML5本地化应用开发-HTML5 Web存储详解

介绍 我们把数据存储在浏览器,一直使用的Cookie,但其实Cookie是有很多数量和大小的限制的。现在我们不用考虑这些了,我们将要学习一种基于HTML5的新技术Web存储。来解决这个问题。...背景 虽然Web存储已经有了自己的规范((http://dev.w3.org/html5/webstorage/) ),并且也在独立于Html5进行开发。...但Web存储通常是集中在HTML5技术之下的。 不像cookie一样,数据存储在Web Storage意味着客户端不在请求服务器了。...首先,它不会离开浏览器,其次,也允许存储更多更大的数据。W3C推荐限制在5MB之内,但是如果用户需要更多的存储,是可以在浏览器中进行设置的。当前一般浏览器会允2MB的容量。...使用Web Storage Web Storage主要包括本地存储和基于Session的存储。它是在域名之上的。如果你不删除这些存储,它是会一直存在的。

73840

一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储

这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能 HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage...客户端存储数据的两个对象为: localStorage – 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除 sessionStorage – 用于临时保存同一窗口(或标签页)的数据,...中的键值对会被清空 也就是说 localStorage 对象存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除 HTML5...Web 存储的局限性 1、浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储 2、HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间...– HTML5 Web 存储

1.9K20
领券