存储

  • 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.length
sessionStorate、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 event
manifest属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。清单文件可使用任何文件扩展名，但必须以正确的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.png
CACHE：

    这是条目的默认部分。系统会在首次下载此标头下列出的文件（或紧跟在 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特性的更多相关文章

  1. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  2. HTML5 中的新特性：

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...

  3. 在 .NET 4.0 中使用 .NET 4.5 中新增的特性（CallerMemberNameAttribute/CallerFilePathAttribute/CallerLineNumberAttribute）

    介绍 标题中所说的三个特性 CallerMemberNameAttribute / CallerFilePathAttribute / CallerLineNumberAttribute 我们统称为调 ...

  4. html5中新增的非主体结构的元素

    html5中出了新增了article.section.nav.aside.time主要结构元素外,还增加了一些表示逻辑结构或附加信息的非主体结构元素. 一.header元素 header元素是一种具有 ...

  5. html5中新增的元素和废除的元素

    一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...

  6. html5中新增的语义化的标签

    html5是html最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络 ...

  7. NET 4.5 中新增的特性调用者信息特性CallerMemberNameAttribute/CallerFilePathAttribute/CallerLineNumberAttribute

    标题中所说的三个特性 CallerMemberNameAttribute / CallerFilePathAttribute / CallerLineNumberAttribute 我们统称为调用者信 ...

  8. html5中新增的属性和删除的属性

    一.表单新增的属性 1.对input(type="text").select.textarea与button元素指定autofocus属性,它以指定属性的方式让元素在画面打开时自动 ...

  9. HTML5中新增的主体结构元素

    article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以使一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或其他任何独立的内 ...

随机推荐

  1. Ubutun：镜像网站

    中科大镜像站(地址:安徽):http://mirrors.ustc.edu.cn清华大学镜像站:http://mirrors.tuna.tsinghua.edu.cn浙江大学镜像站:http://mi ...

  2. Python的介绍与主要方向

    1.1 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 编程的目的: 计算机的发明,是为了用机器取代/解放人力, ...

  3. JDK下载安装与环境变量配置【全网最新】

    1.下载安装JDK 下载地址:(https://www.oracle.com/java/technologies/downloads/) 最好选择解压版,解压即可(说删就删) 解压:例如我解压目录为 ...

  4. JAVA——转义字符

    目录 1.Java转义字符 2.Java中的注释 2.1Java 中的注释类型 2.2文档注释 3.Java代码规范 4.Java开发注意事项和细节说明 1.Java转义字符 在控制台,输入 tab ...

  5. git--新建分支&提交代码

    本地文件都删除后,本地分支也随之被删除了: 重新clone:git clone - (-为代码在git上的地址,不同协议会有不同形式的地址,例如:HTTPS.SSH,我用HTTPS) 进入克隆完成的代 ...

  6. MM32F0140 UART1中断接收和UART1中断发送

    目录: 1.MM32F0140简介 2.初始化MM32F0140 UART1和NVIC中断 3.编写MM32F0140 UART1使能中断发送函数 4.编写MM32F0140 UART1中断接收和中断 ...

  7. OpenSSL CVE-2022-0778漏洞问题复现与非法证书构造

    本文介绍CVE-2022 0778漏洞及其复现方法,并精心构造了具有一个非法椭圆曲线参数的证书可以触发该漏洞. 本博客已迁移至CatBro's Blog,那是我自己搭建的个人博客,欢迎关注.本文链接 ...

  8. unity 加载网络图片

    摘要:利用Http加载网络图片. 解决思路: 1.直接用unity 自带的www加载,在高版本www已经过时了. 2.本文直接使用万能的文件流加载. (1)使用System.Net.HttpWebRe ...

  9. 5月25日 python学习总结 HTML标签

    一.HTML简介  http://www.cnblogs.com/linhaifeng/articles/8973878.html 二.HTML标签与文档结构 http://www.cnblogs.c ...

  10. 5月2日 python学习总结 IO模型

    IO模型 1.阻塞IO 2.非阻塞IO 3.多路复用IO 4.异步IO 一.阻塞IO blocking IO的特点就是在IO执行的两个阶段(等待数据和拷贝数据两个阶段)都被block了. 实际上,除非 ...