搜索
首页web前端js教程HTML5 Web缓存和运用程序缓存
HTML5 Web缓存和运用程序缓存Jan 13, 2018 am 11:13 AM
h5html5web

本文主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

在介绍HTML5 web缓存前,来认识一下cookie和session:

session:

由于HTTP是无状态的,你是谁?你干了什么?抱歉服务器都是不知道的。

因此session(会话)出现了,它会在服务器上存储用户信息以便将来使用(比如用户名称,购物车购买商品等)。

但是session是临时的,用户离开网站将被删除。如果要永久存储信息,可以保存在数据库中!

session工作原理:为每个用户创建一个session id(核心!!!)。而session id是存储在cookie中的,也就是说如果浏览器禁用了cookie,那么session会失效!(但是可以通过其它方式实现,如:通过URL传递session id)

用户验证一般采用session。

cookie:

目的:网站标记用户身份而存储在本地客户端的数据(通常经过加密)。

  1. 用户访问网页时,名字记录在cookie中;

  2. 下次继续访问该网页时,可以从cookie中读取用户访问记录。

cookie会在同源的http请求携带(即使不需要),即在客户端和服务器之间来回传递!

cookie的数据大小不超过4k

cookie的有效期:设置的cookie有效时间之前一直有效,即使浏览器关闭!

localStorage & sessionStorage:

早期,本地缓存普遍使用的是cookie,但是web存储需要更安全、更快速!

这些数据不会保存在服务器上(存储在客户端),不会影响服务器性能!

sessionStorage和localStorage数据存储也有大小限制,但却比cookie大得多,可以达到5M甚至更大!

localStorage:没有时间限制的数据存储!

sessionStorage:由英文意思也可知,它是对session的数据存储,所以在用户关闭浏览器(标签页/窗口)后,数据被删除!

HTML5 web存储支持情况:

IE8以上,现代浏览器。

数据以键值对存储:

localStorage和sessionStorage都有以下几个方法:

  1. localStorage.setItem(key,value):设置(保存)数据;相当于localStorage.key=value!

  2. localStorage.getItem(key):获取数据

  3. localStorage.removeItem(key):删除单个数据

  4. localStorage.clear():删除所有数据

  5. localStorage.key(index):获取某个索引的键值


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web storage</title>
</head>

<body>
    <p id="test"></p>
    <script>
        if (typeof (Storage) != undefined) {
            localStorage.name = &#39;xiao ming&#39;;
            localStorage.setItem(&#39;name1&#39;, &#39;Apple&#39;);
            document.getElementById(&#39;test&#39;).innerHTML = "you are: " + localStorage.name;
            console.log("first:" + localStorage.name1 + "," + localStorage.key(0));
            localStorage.removeItem(&#39;name1&#39;);
            console.log("second: " + localStorage.name1);
            console.log("third: " + localStorage.getItem(&#39;name&#39;));
            localStorage.clear();
            console.log("last:" + localStorage.name);
        } else {
            document.getElementById(&#39;test&#39;).innerHTML = "更新浏览器吧!目前浏览器不支持stroage";
        }
        
    </script>
</body>
</html>

程序运行结果:

注意:键值对是以字符串保存的,根据需求应改变类型(比如做加法,变为Number型)。

 HTML5运用程序缓存(Application Cache):

通过创建cache manifest文件,web运用可被缓存,并且无网络状态可以进行访问!

Application Cache优势:

1.离线浏览;
2.速度更快:已缓存资源加载更快;
3.减少浏览器负载:客户端将只从服务器下载或更新更改过的资源

支持情况:

IE10以上,现代浏览器。

使用:


<!DOCTYPE html>
<html manifest="demo.appcache">
</html>

注意:要开启application cache,需指定manifest属性(扩展名:.appcache);如果未指定manifest属性,页面不会缓存(除非在manifest文件中直接指定了该页面!)

manifest文件在服务器上需正确的配置MIME-type:text/cache-manifest。

Manifest文件:

manifest是简单的文本文件,它告知浏览器被缓存的内容以及不被缓存的内容!

manifest可分为三部分:

CACHE MANIFEST:此项列出的文件将在首次下载后进行缓存!

NETWORK:此项列出的文件需要与服务器进行网络连接,不会被缓存!

FALLBACK:此项列出当页面无法访问时的回退页面(如:404页面)!

test.appcache:


CACHE MANIFEST
#2017 11 21 v10.0.1
/test.css
/logo.gif
/main.js

NETWORK
/login.php
/register.php

FALLBACK
#/html/目录中文件无法访问时,用/offline.html替代
/html/ /offline.html

更新application cache的情况:
1.用户清空浏览器缓存!
2.manifest文件被更改(#:表示注释,同时如果更改为#2018 1 1 v20.0.0,则浏览器会重新缓存!)
3.程序进行更新application cache!

Web Workers:

web workers是运行在后台的javascript,独立于其它脚本,不会影响页面性能!

而一般的HTML页面上执行脚本时,除非脚本加载完成,否则页面不会响应!

支持情况:IE10以上,现代浏览器

示例:html文件:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>web worker</title>
</head>
<body>
    <p>计数:<output id="count"></output></p>
    <button onclick="startWorker()">开始</button>
    <button onclick="overWorker()">结束</button>

    <script>
        var w;
        function startWorker(){
            // 检测浏览器是否支持web worker
            if(typeof(Worker)!==&#39;undefined&#39;){
                if(typeof(w)==&#39;undefined&#39;){
                    //创建web worker对象
                    w=new Worker(&#39;testWorker.js&#39;);
                }
                // 事件持续监听(即使外部脚本已经完成),除非被终止
                w.onmessage=function(event){
                    document.getElementById(&#39;count&#39;).innerHTML=event.data;
                };
            }else{
                document.getElementById(&#39;count&#39;).innerHTML=&#39;浏览器不支持web worker&#39;;
            }
        }
        function overWorker() {
            // 终止web worker对象,释放浏览器/计算机资源
            w.terminate();
            w=undefined;
        }
    </script>
</body>
</html>

testWorker.js文件:


var i=0;
function timedCount() {
    i+=1;
    // 重要的部分,向html页面传回一段信息
    postMessage(i);
    setTimeout(&#39;timedCount()&#39;,500);
}
timedCount();

注意1:通常web worker不是用于如此简单的任务,而是用在更耗CPU资源的任务!

注意2:在chrome中运行会产生“cannot be accessed from origin 'null'”的错误,我的解决方法是:xampp中开启apache,用http://localhost/进行访问。

web worker缺点:

由于web worker位于外部文件中,所以它无法访问下列javascript对象:

  1. window对象;

  2. document对象;

  3. parent对象。

HTML5 server-sent events(服务器发送事件):

server-sent事件是单向信息传递;网页可以自动获取来自服务器的更新!

以前:网页先询问是否有可用的更新,服务器发送数据,进行更新(双向数据传递)!

支持情况:除IE以外的现代浏览器均支持!

示例代码:html文件:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sever sent event</title>
</head>
<body>
    <p>sever sent event informations</p>
    <p id="test"></p>
    <script>
        // 判断浏览器是否支持EventSource
        if(typeof(EventSource)!==undefined){
            // 创建EventSource对象
            var source=new EventSource("test.php");
            // 事件监听
            source.onmessage=function(event){
                document.getElementById(&#39;test&#39;).innerHTML+=event.data+"<br>";
            };
        }else{
            document.getElementById(&#39;test&#39;).innerHTML="sorry,浏览器不支持server sent event";
        }
    </script>
</body>
</html>

test.php:


<?php
header(&#39;Content-Type:text/event-stream&#39;);
header(&#39;Cache-Control:no-cache&#39;);

$time=date(&#39;r&#39;);
echo "data:The server time is: {$time} \n\n";
// 刷新输出数据
flush();

注意:后面没有内容,php文件可以不用"?>"关闭!

HTML5 WebSocket:

  1. WebSocket是HTML5提供的一种在单个TCP连接上建立全双工(类似电话)通讯的协议;

  2. 浏览器和服务器之间只需要进行一次握手的操作,浏览器和服务器之间就形成了一条快速通道,两者之间就可直接进行数据传送;

  3. 浏览器通过javascript建立WebSocket连接请求,通过send()向服务器发送数据,onmessage()接收服务器返回的数据。

 WebSocket如何兼容低浏览器:

  1. Adobe Flash Socket;

  2. ActiveX HTMLFile(IE);

  3. 基于multipart编码发送XHR;

  4. 基于长轮询的XHR

WebSocket可以用在多个标签页之间的通信!

相关推荐:

Nginx的Web缓存服务与新浪网的开源NCACHE模块

Web缓存杂谈_html/css_WEB-ITnose

基于反向代理的Web缓存加速可缓存的CMS系统设计_PHP

以上是HTML5 Web缓存和运用程序缓存的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
html5的div一行可以放两个吗html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素,一个元素会独占一行,两个div默认无法在同一行显示;但可以通过给div元素添加“display:inline;”样式,将其转为行内元素,就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别:1、表格主要是用于显示数据的,而列表主要是用于给数据进行布局;2、表格是使用table标签配合tr、td、th等标签进行定义的,列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法:1、使用header标签定义文档头部内容,并添加“position:fixed;top:0;”样式让其固定不动;2、使用footer标签定义尾部内容,并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有:1、acronym,用于定义首字母缩写,可用abbr替代;2、basefont,可利用css样式替代;3、applet,可用object替代;4、dir,定义目录列表,可用ul替代;5、big,定义大号文本等等。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html5是什么意思html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言(HTML)的第五次重大修改,即第5代HTML。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。

html5为什么只需要写doctypehtml5为什么只需要写doctypeJun 07, 2022 pm 05:15 PM

因为html5不基于SGML(标准通用置标语言),不需要对DTD进行引用,但是需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可。“!DOCTYPE”是一种标准通用标记语言的文档类型声明,用于告诉浏览器编写页面所用的标记的版本。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器