html5学习

最新推荐文章于 2024-09-10 08:58:47 发布

wwwsec

最新推荐文章于 2024-09-10 08:58:47 发布

阅读量412

点赞数

分类专栏： webapp 文章标签： html5 webapp

本文链接：https://blog.csdn.net/wwwsec/article/details/41676349

版权

webapp 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近使用webapp的方式编写windows程序，想做到版本的自动更新，在网上找资料，无果。

想起html5支持客户端缓存，于是查了一下html5的文档，把可能用到的知识点记录一下。

1、web存储

localstorage

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);

</script>

</body>
</html>

sessionstorage

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);

</script>

</body>
</html>

2、应用缓存，可以利用mainfest 文件做版本的自动更新。

<!DOCTYPE html>
<html manifest="/cache.txt">
<body>
    hello,cache.
</body>

</html>

<pre style="word-wrap: break-word; white-space: pre-wrap;">

CACHE MANIFEST
/cache.html

NETWORK:
login.php

FALLBACK:
/html5/ /404.html

3、webworker，后台运行的javascript.

4、接收server-send事件通知，可以用在一些特殊的用户通知场景。

服务端发送通知的示例代码如下

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

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

5、indexDB

<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Application - IndexedDb</title>
<script type="text/javascript">
var blockbusters={
	 title:"nishi",
	 derector:"shi",
	 length:120
	};//假设这个object用来保存的
	
var db;
var request;
var store;
 function createDatabase(dbName){
	  request=indexedDB.open(dbName,3);
	  
	  request.onerror = function () {
           alert("fail to open datbase with:"+event.target.message);
	   }
      request.onsuccess = function (event) {
			 alert("success open the database!");
			 // store.add(ss);
			 db=event.target.result;
			 var transaction = db.transaction(["blockbusters"], "readwrite");
             var objectStore = transaction.objectStore("blockbusters");
			 objectStore.add(blockbusters);
			// var store = db.createObjectStore("blockbusters", {keyPath: "title",autoIncrement: false});
			//   store.createIndex("director", "director", { unique: false });
		    // var transaction = db.transaction(["blockbusters"],readwirte);
            //    store = transaction.objectStore("blockbusters");
            //   request = store.put(video);	 
       } 
	  request.onupgradeneeded = function(event) {
		   alert("version Change");
           db = event.target.result;
		   store = db.createObjectStore("blockbusters", {keyPath: "title",autoIncrement: false});
			  // store.createIndex("director", "director", { unique: false });
		  
	   }
	 }
	 
   function deletedatabase(dbName){
	   try{
	     indexedDB.deleteDatabase(dbName);
	   }catch(e){
		   alert(e.getMessage);
		   }
	   }	 
</script>
</head>
<body>
	<button οnclick="createDatabase('Test')">Create Database</button>
    <button οnclick="deletedatabase('customers')">delet Database</button>

</body>
</html>

6、web sql

 <!DOCTYPE HTML>
 <html>
 <head>
 <script type="text/javascript">
 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 var msg;
 db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
    msg = '<p>Log message created and row inserted.</p>';
    document.querySelector('#status').innerHTML =   msg;
 });

 db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
    var len = results.rows.length, i;
     msg = "<p>Found rows: " + len + "</p>";
     document.querySelector('#status').innerHTML +=   msg;
    for (i = 0; i < len; i++){
       msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
       document.querySelector('#status').innerHTML +=   msg;
     }
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">Status Message</div>
</body>
</html>