笔记大全

html5离线存储和cookie储存分析

更新时间：2024-01-04

什么是HTML5离线存储？

HTML5离线存储是一种在客户端存储数据以便离线访问的技术。它使用一个叫做应用程序缓存(Application Cache)的机制，将网页中的某些文件(如HTML、CSS、JavaScript等)按照一定规则缓存在浏览器本地，不需要每次访问Web服务器来获取文件，大大提高了网页加载速度。

...

在HTML标签中使用manifest属性来指定应用程序缓存清单文件cache.manifest的位置，其中cache.manifest是一个文本文件，它列出了需要缓存的文件。示例代码中，cache.manifest文件的内容如下：

    CACHE MANIFEST
    # version 1.0.0

    index.html
    style.css
    script.js

HTML5离线存储的优缺点

HTML5离线存储的优点是可以提高Web应用程序的性能和用户体验，它能够加快页面的响应速度，减少服务器的负担，提高用户的满意度。同时还可以允许开发者建立可在离线状态下运行的Web应用程序，适用于一些网络不稳定或没有互联网接入的场景。

HTML5离线存储的缺点是在开发过程中需要注意清单文件的维护，它不能动态更新缓存文件，因此如果缓存数据被篡改或过期，用户就会面临到无法快速更新缓存而出现错误的风险。此外，如果你的网站代码中存在错误，那么也可能导致缓存数据没有正确更新，需要手动清理缓存才能恢复正常。

什么是cookie存储？

cookie存储是一种在客户端存储少量数据的技术，通过设置cookie，应用程序可以在客户端保存一些信息，例如登录用户的信息、用户浏览过的网站、购物车信息等。使用cookie存储数据需要同意用户隐私政策，如果需要使用cookie存储用户信息，需要提供明确的告知和用户许可。

    function setCookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    function getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }

    function eraseCookie(name) {   
      document.cookie = name+'=; Max-Age=-99999999;';  
    }

示例代码中包含三个方法: setCookie(), getCookie(),eraseCookie(),它们分别用来设置cookie、获取cookie和删除cookie,其中setCookie()方法的实现代码如下：

cookie 存储的优缺点

cookie存储的优点是应用灵活性高，一个HTTP响应头信息里可以设置多个cookie，可以存储多个键值对。此外，cookie是一种非常可靠和广泛使用的技术，它已经成为开发互联网应用程序的标准方式，具有很好的跨平台性。

cookie存储的缺点是它只能存储有限的数据量，通常不超过4KB，因此它不适用于存储大量的数据。其次，被存储的数据是明文的，用户可以直接在浏览器中查看和修改，存在一定的安全隐患。最后，如果用户禁用cookie，那么应用程序将无法使用cookie来保存用户信息，这可能会影响用户使用体验。

c语言编程笔录