于是session就出现了，它把用户信息存储在服务器上以备将来使用（比如用户名、购物车订单商品等）。
但是，会话是临时的，当用户离开网站时将被删除。 如果您想永久存储信息，可以将其保存在数据库中！
会话如何工作：为每个用户创建一个会话 ID（核心！！！）。 sessionid存储在cookie中，这意味着如果浏览器禁用cookie，session将变得无效！ （并且可以通过其他方式实现html5 缓存页面，比如通过URL传递sessionid）
用户认证通常使用会话。
饼干：
目的：网站本地存储在客户端的数据（通常是加密的），用于识别用户身份。
当用户访问网页时，名称会记录在cookie中； 当用户上次继续访问该网页时html5 缓存页面，可以从cookie中读取用户访问记录。
同源的http请求中会携带cookie（虽然不是必须的），即在客户端和服务器之间来回传递！
cookie的数据大小不超过4k
Cookie有效期：之前设置的Cookie有效期即使浏览器关闭仍然有效！
本地存储&会话存储：
早期，cookie 通常用于本地缓存，但网络存储需要更安全、更快！
这种数据不会保存在服务器上（存储在客户端），不会影响服务器性能！
sessionStorage和localStorage数据存储也有大小限制，但是它们比cookie大得多，可以达到5M甚至更大！
localStorage：数据存储无时间限制！
sessionStorage：从英文含义可以看出，是session的数据存储，所以用户关闭浏览器（选项卡/窗口）后，数据就被删除了！
HTML5 网络存储支持：
IE8以上，现代浏览器。
数据存储在通配符对中：
localStorage和sessionStorage都有以下方法：
localStorage.setItem(key,value)：设置（保存）数据； 相当于 localStorage.key=value!localStorage.getItem(key): 获取数据 localStorage.removeItem(key): 删除单个数据 localStorage.clear(): 删除 删除所有数据 localStorage.key(index): 获取某个数据的通配符指数
web storage
if (typeof (Storage) != undefined) {
localStorage.name = 'xiao ming';
localStorage.setItem('name1', 'Apple');
document.getElementById('test').innerHTML = "you are: " + localStorage.name;
console.log("first:" + localStorage.name1 + "," + localStorage.key(0));
localStorage.removeItem('name1');
console.log("second: " + localStorage.name1);
console.log("third: " + localStorage.getItem('name'));
localStorage.clear();
console.log("last:" + localStorage.name);
} else {
document.getElementById('test').innerHTML = "更新浏览器吧！目前浏览器不支持stroage";
}
程序运行结果：
注意：键名对保存为字符串，需要根据需求更改类型（例如减法，改为Number类型）。
HTML5应用程序缓存（ApplicationCache）：
通过创建cachemanifest文件，可以缓存Web应用程序，但如果没有互联网连接则无法访问！
应用缓存优点：
1. 离线浏览；
2、速度更快：缓存资源加载速度更快；
3.减少浏览器负载：客户端只会从服务器下载或更新发生变化的资源
支持状态：
IE10以上，现代浏览器。
使用：
注意：启用applicationcache需要指定manifest属性（扩展名：.appcache）； 如果未指定manifest属性，则不会缓存该页面（除非该页面直接在manifest文件中指定！）
清单文件必须在服务器上正确配置 MIME 类型：text/cache-manifest。
清单文件：
清单是一个简单的文本文件，它告诉浏览器缓存什么以及不缓存什么！
清单可以分为三个部分：
CACHEMANIFEST：此处列出的文件将在首次下载后缓存！
网络：此项中列出的文件需要与服务器有网络连接，并且不会被缓存！
FALLBACK：此项列出了页面难以访问时的后备页面（如：404页面）！
测试.应用程序缓存：
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
更新应用程序缓存：
1.用户清除浏览器缓存！
2、修改manifest文件（#：表示注释，修改为#201811v20.0.0，浏览器会重新缓存！）
3.程序更新applicationcache！
网络工作者：
Webworkers 是在后台运行的 javascript，独立于其他脚本，不会影响页面性能！
在普通 HTML 页面上执行脚本时，除非加载脚本，否则页面不会响应！
支持：IE10以上现代浏览器
示例：html 文件：
web worker
计数：
var w;
function startWorker(){
// 检测浏览器是否支持web worker
if(typeof(Worker)!=='undefined'){
if(typeof(w)=='undefined'){
//创建web worker对象
w=new Worker('testWorker.js');
}
// 事件持续监听(即使外部脚本已经完成),除非被终止
w.onmessage=function(event){
document.getElementById('count').innerHTML=event.data;
};
}else{
document.getElementById('count').innerHTML='浏览器不支持web worker';
}
}
function overWorker() {
// 终止web worker对象，释放浏览器/计算机资源
w.terminate();
w=undefined;
}
testWorker.js 文件：
var i=0;
function timedCount() {
i+=1;
// 重要的部分，向html页面传回一段信息
postMessage(i);
setTimeout('timedCount()',500);
}
timedCount();
注1：一般情况下，webworkers不是用于这么简单的任务，而是用于消耗CPU资源较多的任务！
注2：在chrome中运行会出现“cannotbeaccessedfromorigin'null'”错误。 我的解决方案是：在xampp中打开apache并使用来访问。
网络工作者的缺点：
由于 webworker 位于外部文件中，因此它无法访问以下 javascript 对象：
窗口对象； 文档对象； 父对象。
HTML5服务器发送事件：
服务器发送的风暴是双向信息传输； 网页可以手动从服务器获取更新！
曾几何时：网页首先询问是否有可用更新，服务器发送数据进行更新（单向数据传输）！
支持状态：除IE外所有现代浏览器都支持！
示例代码：html文件：
sever sent event
sever sent event informations
// 判断浏览器是否支持EventSource
if(typeof(EventSource)!==undefined){
// 创建EventSource对象
var source=new EventSource("test.php");
// 事件监听
source.onmessage=function(event){
document.getElementById('test').innerHTML+=event.data+"
";
};
}else{
document.getElementById('test').innerHTML="sorry,浏览器不支持server sent event";
}
测试.php：
<?php
header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
$time=date('r');
echo "data:The server time is: {$time} nn";
// 刷新输出数据
flush();
注意：前面没有内容，php文件不用“?>”就可以关闭！
HTML5WebSocket：
WebSocket 是 HTML5 提供的一种契约，用于在单个 TCP 连接上构建全双工（类似于电话）通信； 浏览器和服务器之间只需要一次握手操作，浏览器和服务器之间就建立了一条快速通道。 ，两者之间可以直接传输数据； 浏览器通过javascript构造WebSocket连接请求，通过send()向服务器发送数据，通过onmessage()接收服务器返回的数据。
WebSocket如何兼容低端浏览器：
AdobeFlashSocket;ActiveXHTMLFile(IE);基于多部分编码发送XHR;基于长协程的XHR
WebSocket可以用于多个选项卡之间的通信！
以上就是本文的全部内容。 希望对你的学习有所帮助。 也希望大家支持Script Home。
