HTML5+CSS3-充实笔记0626

197

收藏 2019-06-27

Notification对象

if(window.Notification){

if(Notification.permission == "granted"){

var notification = new Notification("桌面消息", {body:"这是由Notification对象创建的桌面消息！"});
}else{

document.getElementById("rButton").onclick = function(){
Notification.requestPermission();
};

};

}else alert("你的浏览器不支持。");

ch9. 本地存储与离线应用

HTML5中的两个应用

本地存储实现了Web应用对数据本地化存储的功能，为Web应用操作本地数据提供了一个标准
离线应用满足Web应用在离线状态下的正常操作（延伸了Web应用的功能）

sessionStorage（临时保存）
localStorage（永久保存）

都可以使用的API：

setItem(key, value);
getItem(key);
removeItem(key);
clear();
key(index);

一个示例：

<!DOCTYPE html>
<html>
<head>
   <title>9.1.1.html</title>
   <meta charset="utf-8" />
   <script type="text/javascript">
      function save(){
         var title = document.getElementById("txtTitle").value;
         var content = document.getElementById("txtContent").value;
         localStorage.setItem(title, content);
         document.getElementById("txtTitle").value = "";
         document.getElementById("txtContent").value = "";
         loadAll();
      }
      function search(){
         var title = document.getElementById("searchTitle").value;
         if(title==""){
               loadAll();
         }
         else{
               var content = localStorage.getItem(title);
               var searchContent = document.getElementById("searchContent");
               searchContent.innerHTML = "<h2>"+title +"</h2>" + content;
         }

      }