HTML5中新增Javascript特征

2024年2月20日 154次阅读 来源: stylever

存储

  • 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));
});
    原文作者：stylever
    原文地址: https://segmentfault.com/a/1190000009279993
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞