HTML5中新增Javascript特性
存储
localStorage
存储：
window.localStorage.setItem('key', 'value');
取值：
window.localStorage.getItem('key');
删除：
window.localStorage.removeItem('key');
清除：
window.localStorage.clear();
长度：
window.localStorage.length sessionStorage
存储：
window.sessionStorage.setItem('key', 'value');
取值：
window.sessionStorage.getItem('key');
删除：
window.sessionStorage.removeItem('key');
清除：
window.sessionStorage.clear();
长度：
window.sessionStorage.lengthsessionStorate、localStorage、cookies三者区别：
1. sessionStorate和localStorage存储空间更大, 5M或者更大；cookie存储一般不能超过4kb。
2. sessionStorate和localStorage不会自动把数据发给服务器，仅为本地存储；cookie在每次http请求都会传送到服务端。
3. sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
4. sessionStorate和localStorage支持事件通知机制，可以将数据更新的通知发送给监听者。ApplicationCache
优点：
1. 离线浏览 - 用户可在离线时浏览您的完整网站
2. 速度 - 缓存资源为本地资源，因此加载速度较快。
3. 服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源<!DOCTYPE html>
<html manifest="cache.manifest" type="text/cache-manifest">
<head>
<meta charset="UTF-8">
<title>manifest</title>
</head>
<body>
<img src="/images/default_pic.jpg" alt="">
</body>
</html>
浏览器会打印如下信息：
Creating Application Cache with manifest http://localhost:5555/index/cache.manifest
cache:1 Application Cache Checking event
cache:1 Application Cache Downloading event
cache:1 Application Cache Progress event (0 of 1) http://localhost:5555/images/default_pic.jpg
cache:1 Application Cache Progress event (1 of 1)
cache:1 Application Cache Cached eventmanifest属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的MIME类型提供。
cache.manifest文件配置如下：
CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
/index.html
/images/default_pic.jpg
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache
CACHE:
/images/logo1.png
/images/logo2.png
/images/logo3.pngCACHE：
这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 CACHE MANIFEST 后的文件）后显式缓存这些文件。
NETWORK：
此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。可使用通配符。
FALLBACK：
此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。可使用通配符。更新缓存
var appCache = window.applicationCache;
appCache.update(); // Attempt to update the user's cache.
...
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}
update()获取新的应用缓存
swapCache()将原缓存换成新缓存
此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。
上述过程需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。
为了避免重新加载两次的麻烦，可以设置监听器
// 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);Drag and Drop
<div id="drag1" class="drag"></div>
<img id="drag2" src="logo.png" alt="" draggable="true">var drag1 = document.getElementById('drag1');
var drag2 = document.getElementById('drag2');
drag1.addEventListener('dragover', function (event) {
event.preventDefault();
}, false);
drag1.addEventListener('drop', function (event) {
event.preventDefault();
var id = event.dataTransfer.getData('id');
drag1.appendChild(document.getElementById(id));
}, false)
drag2.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('id', event.target.id);
}, false);| 属性 | 描述 |
|---|---|
| ondrag | 元素被拖动时运行的脚本 |
| ondragstart | 在拖动操作开端运行的脚本 |
| ondragover | 当元素在有效拖放目标上正在被拖动时运行的脚本 |
| ondragenter | 当元素元素已被拖动到有效拖放区域时运行的脚本 |
| ondragleave | 当元素离开有效拖放目标时运行的脚本 |
| ondragend | 在拖动操作末端运行的脚本 |
| ondrop | 当被拖元素正在被拖放时运行的脚本 |
event.dataTrasfer.setData()，设置一个key-value。
dragover事件，默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
drop事件的默认行为是以链接形式打开。Web Workers
JavaScript语言采用的是单线程模型，Web Worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务，再把结果返回给主线程。
主线程 main.js
var worker = new Worker('worker.js');
worker.postMessage('I am main.js');
worker.addEventListener('message', function (event) {
console.log('main receive:' + event.data);
}, false);子线程 worker.js
self.addEventListener('message', function (event) {
console.log('worker receive:' + event.data);
self.postMessage('I am worker.js');
}, false);关闭主线程
worker.terminate();
关闭子线程
self.close();Web Sockets
客户端
var connection = new WebSocket('ws://localhost:5555', 'echo-protocol');
connection.onopen = function (event) {
console.log('open')
connection.send('This is a client')
}
connection.onmessage = function (event) {
console.log('message:' + event.data)
}
connection.onclose = function (event) {
console.log('close')
}服务端（node.js）
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var WebSocketServer = require('websocket').server;
var wsServer = new WebSocketServer({
httpServer: server
});
var connection;
wsServer.on('request', function(req){
connection = req.accept('echo-protocol', req.origin);
connection.on('message', function(message) {
var msgString = message.utf8Data;
console.log(msgString)
connection.sendUTF(msgString);
});
});注：socket.io是目前最流行的WebSocket实现
History
history.pushState()
pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。
history.pushState()接收3个参数
state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
var stateObj = {'page': '1'};
history.pushState(stateObj, 'title', '?debug=1');history.replaceState()
replaceState方法参数和pushState方法参数相同，但是会修改浏览历史中当前纪录。
history.replaceState(null, null, '?page=2');history.state
history.pushState({page: 1}, null, '?page=1');
history.state
{page: 1}popstate事件
每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
window.onpopstate = function (event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
};
// 或者
window.addEventListener('popstate', function(event) {
console.log('location: ' + document.location);
console.log('state: ' + JSON.stringify(event.state));
});HTML5中新增Javascript特性的更多相关文章
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- HTML5 中的新特性：
一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...
- 在 .NET 4.0 中使用 .NET 4.5 中新增的特性（CallerMemberNameAttribute/CallerFilePathAttribute/CallerLineNumberAttribute）
介绍 标题中所说的三个特性 CallerMemberNameAttribute / CallerFilePathAttribute / CallerLineNumberAttribute 我们统称为调 ...
- html5中新增的非主体结构的元素
html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...
- html5中新增的元素和废除的元素
一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...
- html5中新增的语义化的标签
html5是html最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络 ...
- NET 4.5 中新增的特性调用者信息特性CallerMemberNameAttribute/CallerFilePathAttribute/CallerLineNumberAttribute
标题中所说的三个特性 CallerMemberNameAttribute / CallerFilePathAttribute / CallerLineNumberAttribute 我们统称为调用者信 ...
- html5中新增的属性和删除的属性
一.表单新增的属性 1.对input(type="text").select.textarea与button元素指定autofocus属性,它以指定属性的方式让元素在画面打开时自动 ...
- HTML5中新增的主体结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以使一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内 ...
随机推荐
- omnet++：官方文档翻译总结（三）
翻译总结自:Turning it Into a Real Network - OMNeT++ Technical Articles 接官方文档翻译总结(二),本节主要是真实网络的搭建 Part 4 - ...
- lsof、tcpdump和wireshark
lsof:https://www.jianshu.com/p/a3aa6b01b2e1 tcpdump:https://linux.cn/article-10191-1.html wireshark: ...
- 初识html及网络爬虫概念
网络爬虫 HTML超文本标记语言 HTTP协议 简单的网络请求 python模块模拟浏览器发送请求 爬虫小案例 爬虫简介 我们一般情况 都是通过浏览器正常访问服务端获取资源浏览器展示给用户看 爬虫 模 ...
- anaconda及jupyter notebook的了解及使用方法(1)
今日内容 anaconda软件使用 jupyter notebook基本使用及快捷键 numpy anaconda软件使用 1.进入anaconda主页点击jupyter启动即可 呼起一个jupyte ...
- 【NLP】
- php 23种设计模式 - 解释器模式
给定一个语言, 定义它的文法的一种表示,并定义一个解释器,该解释器使用该表示来解释语言中的句子.角色:环境角色(PlayContent):定义解释规则的全局信息.抽象解释器(Empress):定义了部 ...
- php 23种设计模式 - 责任链模式
责任链模式 责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行 ...
- 手绘流程图，教你WSL2与Docker容器无缝互相迁移
摘要:本文主要介绍WSL2与Docker容器无缝迁移镜像. 本文分享自华为云社区<WSL2与Docker容器,无缝互相迁移>,作者: tsjsdbd . 注:本文提到的WSL都是指WSL2 ...
- Apache BeanUtils与Spring BeanUtils性能比较
在我们实际项目开发过程中,我们经常需要将不同的两个对象实例进行属性复制,从而基于源对象的属性信息进行后续操作,而不改变源对象的属性信息,比如DTO数据传输对象和数据对象DO,我们需要将DO对象进行属性 ...
- Paypal标准支付对接
提醒一下,题主是在快速标准支付做到一半的时候换成了标准支付,所以该文档的快速支付大家做个参考就可以了. 一.两种支付方式 标准支付 优点:纯前端对接,简单方便,适用于非技术开发人员.个人即可用,不用花 ...