web 离线存储

r囧r小猫 2022-06-10 01:47 231阅读 0赞

#         应用缓存 #

在移动设备没有网络的情况下不出现404并且可以进行简单的使用

1.需要有一个应用缓存的文件   尾缀文件名为.manifest

\* 用于配置需要缓存的文件

\* 在不同条件下的内容

2.在HTML引入后缀名为manifest的文件

3.文件里书写格式

CACHE MANIFEST

\#\#下面写入你要缓存的文件

index.html

index.js

cdn也可以

ApplicationCache

应用缓存的详细使用

1.需要在服务端配置应用的缓存文件

2.在客户端断网的时候保存另一个版本更新应用缓存文件

console.log(window.applicationCache) // //如果让你更新应用的缓存文件 // //已经缓存的文件下一次有网的情况下 加载文件还是缓存的内容 // //解决思路更新应用缓存的配置文件 // //window.applicationCache onobsolebe // window.applicationCache.onobsolete=function () { // // // this.swapCache(); // console.log("缓存文件失效"); // window.location.reload();

HTML5中的数据储存的方式

1.storage

\*sesstionStorage//只有在不关闭的时候才有效

\*localStorage//只要不清浏览器缓存就永远保存

2indexedDB

indexedDB的基本操作

打开数据库并开始一个事物；

创建一个objectstore

构建一个请求来执行一些数据库操作像增加或提取数据

通过监听正确类型的事件以等待操作完成

在操作结果上进行一些操作，可以在request对象中找到

打开数据库

windows.indexedDB.open("库名",版本号num）；

//如果库存在则打开如果不存在就创建

![Center][]

代码示例：

open（）；

# WebSQL #

webSQL 是一个操作数据库的对象 里面封装了操作数据库的方法   是通过sql语句操作数据库的（创建数据库、建表、增删改查） Sql语句？是一个可以操作数据库的字符串类似正则的规则  他不会自己执行，需要各个平台单独操作数据库的函数执行 这个sql语句  才能让sql执行   在webSQL里面 有执行sql语句的方法 就会去执行sql里面描述的功能   webSQL 跟sql语句 是完全独立的两个东西 Sql语句 只要是sqlite类型的数据库 都可以使用 有自己独立的语法 webSQL是前端独有的一个API    特点： 不区分大小写 语句结束之后 分号也是可选的   CREATE 创建
    TABLE    表
    INSERT 添加
    UPDATE 更新
    SELECT 选择查找
    DELETE 删除     Sql建表的语句 CREATE TABLE 表的名字 （字段）; 添加数据 INSERT INTO 表的名字 （字段） VALUES(值); 删除数据 DELETE FROM 表的名字 WHERE 字段=值; 修改数据 UPDATE 表的名字 SET 字段=值; 查找数据 SELECT *FROM 表的名字； SELECT *FROM 表的名字WHERE 字段=值；   webSQL:有执行sql的方法 openDatabase：打开数据库的方法 Transaction：获取事务的方法 executeSql：执行sql语句的方法       打开数据库 openDatabase(parms); 参数： Name 数据库的名字 必传 Version 数据库的版本号 必传 displayName 数据库的名字 必传 estimatedSize 数据库的大小 必传 creationCallback 数据库创建完成的回调 可选   db = openDatabase("noteDB","1.0","noteDB",1024*1024*10,function (result) {
        console.log(result);
        //只有创建数据库成功 才会调用这个回调     db = result;
    });   通过事务对象 操作sql语句 通过数据库的对象 调用transaction函数会得到一个事务对象 可以通过事务对象 执行sql语句的函数 //callback,errorCallback,successCallback db.transaction(function (ts) {
        console.log(ts);
        //通过得到的事务对象 调用执行sql的方法
        ts.executeSql("sql语句");
    });   执行SQL语句的函数 executeSql（） 参数： sqlStatement：sql语句               必传 Arguments 实参的数组（sql的值）     可选 Callback 执行完成时候的回调         可选
    errorCallback 出现错误时候的回调    可选   db.transaction(function (ts) {
        console.log(ts);
        //通过得到的事务对象 调用执行sql的方法
        //sqlStatement,arguments,callback,errorCallback
        ts.executeSql("CREATE TABLE user (id,username,age);");
    });   db.transaction(function (ts) {
        console.log(ts);
        //通过得到的事务对象 调用执行sql的方法
        //sqlStatement,arguments,callback,errorCallback
        ts.executeSql(sql,args,function (result) {
            console.log(result);
        },function (error) {
            console.log(error);
        });
    });   添加 oprationSQL("INSERT INTO user (id,username,age) VALUES (6,'小ming',23);");   删除 oprationSQL("DELETE FROM user WHERE id=0",[],function () {
        searchAll();
    });   修改 oprationSQL("UPDATE user SET username='"+username+"' WHERE username='奥特曼';",[],function () {
        searchAll();
    });   查询 oprationSQL("SELECT * FROM user;",[],function (result) {
        var content = "";
        for (var i=0;i<result.rows.length;i++){
            content+="<p>"+result.rows[i].username+"</p>"     }
        document.body.innerHTML = content;
    });

webSQL的封装

[Center]: /images/20220610/4337b640aa334ff7a957d4d66989e9e8.png