HTML5学习笔记----Day03

最新推荐文章于 2024-04-21 11:17:23 发布

芋头同学

最新推荐文章于 2024-04-21 11:17:23 发布

阅读量110

点赞数

分类专栏： HTML5学习笔记

本文链接：https://blog.csdn.net/jsupoker/article/details/108451043

版权

HTML5学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web 存储、应用缓存、Web Workers

Web 存储

HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

localStorage 方法：

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

创建和访问 localStorage：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web存储</title>
</head>
<body>
<script>
    var ls = localStorage;
    ls.name = 'zhangsan'
    document.write(ls.name)
</script>
</body>
</html>

localStorage Demo：

网页访问计次：

<script>
    var ls = localStorage;
    if(ls.count){
        ls.count = Number(ls.count) + 1;
    }else {
        ls.count = "1";
    }
    document.write("Count:"+ls.count)
</script>

在这里插入图片描述

sessionStorage 方法：

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

创建和访问 sessionStorage ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web存储</title>
</head>
<body>
点击了：<span id="count">0</span>次
<br>
<button onclick="record()">Click Me</button>
<script>
    function record() {
        var ss = sessionStorage;
        if(ss.count){
            ss.count = Number(ss.count) + 1;
        }else {
            ss.count = 1;
        }
        document.getElementById("count").innerText = ss.count;
    }
</script>
</body>
</html>

在这里插入图片描述

localStorage 和sessionStorage 的更多参考资料

localStorage 参考资料
 sessionStorage 参考资料

应用缓存

在这里插入图片描述

什么是应用程序缓存（Application Cache）？

HTML5 提供一种应用程序缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器应该缓存的资源并使得离线用户可用。在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。

应用程序缓存的三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能

检测浏览器是否支持Web Worker：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker</title>
</head>
<body>
<script>
    if (typeof(Worker)!="undefined"){
        console.log("浏览器支持")
    }else {
        console.log("浏览器不支持")
    }
</script>
</body>
</html>

在这里插入图片描述

Web Worker Demo：

1、创建worker文件：

在这里插入图片描述

2、使用worker文件：

<body>
<span id="show"></span>
<button onclick="startWorker()">开启Worker</button>
<button onclick="stopWorker()">终止Worker</button>
<script>
   var w;
   function startWorker() {
       if (typeof(Worker)!="undefined"){
           console.log("浏览器支持")
           if (typeof(w)=="undefined"){
               w = new Worker('./js/myworkers.js')
           }
           w.onmessage = function (event) {
               document.getElementById("show").innerHTML=event.data;
           };
       }else {
           console.log("浏览器不支持")
       }
   }
    function stopWorker()
    {
        w.terminate();
    }
</script>
</body>