• HTML5中的本地、WebSql、离线应用存储


    1.   HTML5存储相关API

    a)   Localstorage 本地存储

    b)   Web Sql DataBase 本地数据库存储

    c)   .manifest 离线应用存储

    2.   HTML5 localStorage 本地存储:

    a)   本地存储是一个window的属性:, 相当于一个大型的Cookie;

    b)   window.localStorage :

    c)   set方法:

            i.      localStorage.t1 = “aaa”;

           ii.      localStorage[t2] = “bbb”;

         iii.      localStorage.setItem(“t3”, “ccc”);

    d)   get方法:

            i.      localStorage.t1;

           ii.      localStorage[t1];

         iii.      localStorage.getItem(“t1”);

    e)   delete方法:

            i.      localStorage.removeItem();

           ii.      localStorage.clear(); // 清除所有;

    f)   遍历方法:

            i.      localStorage.length;

           ii.      localStorage.key(); 

    3.   HTML5 Web Sql Database 数据库:

    a)   Web Sql 数据库API 实际上不是HTML5规范的组成部分;

    b)   在HTML5之前就已经存在了,是单独的规范;

    c)   它是将数据以数据库的形式存储在客户端,根据需求去读取;

    d)   跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的;

    e)   Web Sql 更方便于检索,允许sql语句查询;

    f)   让浏览器实现小型数据库存储功能;

    g)   这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;

    4.   HTML5 Web DataBase 操作:

    a)   openDatabase() :

            i.      window.openDatabase(“数据库名”,”指定数据库版本1.0或2.0”,”数据库描述”,数据库大小,字节);

           ii.      创建数据库对象,可以使用已有数据库,也可以创建新的数据库;

         iii.      返回一个对象;

    b)   transaction() :

            i.      database.transaction(fn(obj));

           ii.      用于触发操作;参数是一个匿名函数;

    c)   executeSql() :

            i.      tx.executeSql(sql语句,sql参数, 返回源,错误);

           ii.      用于执行sql

    5.   HTML5 本地离线应用存储:

    a)   与HTML5 本地存储、本地数据库的关系;

    6.   离线应用:

    a)   Web2.0技术鼓励个人参与,每个人都是web内容的撰写者,如微博;

    b)   Web应用能够提供离线的功能,让用户在没有网络的地方也能进行内容撰写,等到有网络的时候,再同步到web上;

    c)   离线应用在首次加载的时候把所有资源下载下来,缓存到本地,离线应用与浏览器的缓存是不同的,我们可以指定缓存的内容,也可以指定那些东西是需要读取数据库的;

    d)   HTML5对离线功能的支持,在第一次访问的时候会去访问服务器,并且下载一个存储清单,从清单中依次下载里面的内容,存储到指定位置,当我们清除浏览器缓存的时候,是不会清除到这些内容的,这些内容是指定存储的,浏览器二次访问的时候,就算是断网了还是可以去访问这些缓存到本地的内容的;用户在断网期间的操作,通过web sql存储下来,等联网的时候将本地的数据传上去;

    7.   HTML5 实现离线应用  操作:

    a)   配置服务器:

            i.      让服务器支持.manifest类型文件;

           ii.      AddType text/cache-manifest .manifest

    b)   创建manifest文件: (存储清单)

            i.      CACHE MANIFEST  // 声明文件头部

           ii.      #This is a comment

         iii.      CACHE  // 离线存储文件

           iv.      NETWORK  // 需要网络调用的文件

            v.      FALLBACK   // 资源失效或不可用时更新文件

        c)  关联manifest文件到 html文档

          

    8.   HTML5离线内容更新:

    a)   自动更新:

    b)   手动更新:

     i.      检测window.applicationCache.status的值;如果是UPDATEREADY

     ii.      使用 window.applicationCache.update更新缓存;

  • 相关阅读:
    Vue 路由组件传参的 8 种方式
    JS中通过url动态获取图片大小的方法小结(两种方法)
    基于 Vue.js 实现的精致移动端组件库
    .net core 通过代码创建数据库表
    .net core 框架调用顺序
    POCO的理解
    winform datagridview 同步滚动
    UseIIS
    winform 多个datagridview 之间同步滚动
    winform BackgroundWorker 的用法
  • 原文地址:https://www.cnblogs.com/waw/p/4220561.html
Copyright © 2020-2023  润新知