九种浏览器端缓存方法知多少

发布网友

共2个回答

懂视网

本篇文章给大家带来的内容是关于openDatabase数据库web前端缓存（代码实例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

本次数据库缓存的api学习要求对数据库操作语句有点基础认知，如果不了解数据库语句的简单的增删查改的话，建议观看此篇博客的童鞋先去小小的了解一下数据库语句的增删改查，本文也只是对数据库表的增删改查的基本操作的实例演示，并没有做一些数据库表的关联操作，但满足大家对前端数据缓存的大多数要求。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

<!--
openDatabase与android里面的sqlite差不多
最好的选型存储
-->

<h1>opendatabse数据库操作</h1>

<button id="btn-create">创建user数据表</button>
<button id="btn-insert">插入数据</button>
<button id="btn-query">查询数据</button>
<button id="btn-update">修改数据</button>
<button id="btn-delete">删除数据</button>
<button id="btn-drop">删除user数据表</button>

<script type="text/javascript">

 let findId = id => document.getElementById(id);

 //模拟一条user数据
 let user = {
 username: "liuqiang",
 password: "123569874",
 info: "beaconApp开发团队中一员"
 };

 /**
 * 创建数据库 或者此数据库已经存在 那么就是打开数据库
 * name: 数据库名称
 * version: 版本号
 * displayName: 对数据库的描述
 * estimatedSize: 设置数据的大小
 * creationCallback: 回调函数(可省略)
 */
 let db = openDatabase("MySql", "1.0", "我的数据库描述", 1024 * 1024);
 let result = db ? "数据库创建成功" : "数据库创建失败";
 console.log(result);


 const USER_TABLE_SQL = "create table if not exists userTable (id integer primary key autoincrement,username varchar(12)," +
 "password varchar(16),info text)";

 //创建数据表
 function createTable() {
 db.transaction(tx => {
  tx.executeSql(USER_TABLE_SQL, [],
  (tx, result) => {
   alert('创建user表成功:' + result);
  }, (tx, error) => {
   alert('创建user表失败:' + error.message);
  })
 })
 }

 const INSERT_USER_SQL = "insert into userTable (username, password,info) values(?,?,?)";

 //插入数据
 function insertData(user) {
 db.transaction(tx => {
  tx.executeSql(INSERT_USER_SQL,
  [user.username, user.password, user.info],
  (tx, result) => {
   alert('添加数据成功:');
  }, (tx, error) => {
   alert('添加数据失败:' + error.message);
  })
 })
 }

 const QUERY_USER_SQL = "select * from userTable";

 //查询数据
 function queryData() {
 db.transaction(tx => {
  tx.executeSql(QUERY_USER_SQL, [],
  (tx, result) => {
   console.log(result);
  },
  (tx, error) => {
   console.log('查询失败: ' + error.message)
  })
 })
 }

 const UPDATE_USER_SQL = "update userTable set password = ? where username = ?";

 //修改数据
 function updateData(user) {
 db.transaction(tx => {
  tx.executeSql(UPDATE_USER_SQL, [user.password, user.username],
  (tx, result) => {
   alert("修改数据成功")
  }, (tx, error) => {
   alert("修改数据失败:" + error.message)
  })
 })
 }

 const DELETE_USER_SQL = "delete from userTable where username = ?";

 //删除数据
 function deleteData(user) {
 db.transaction(tx => {
  tx.executeSql(DELETE_USER_SQL, [user.username],
  (transaction, resultSet) => {
   alert("删除数据成功")
  }, (transaction, error) => {
   alert("删除数据失败:" + error.message)
  })
 });
 }

 const DROP_USER_SQL = "drop table userTable";

 //删除数据表
 function dropTable() {
 db.transaction(tx => {
  tx.executeSql(DROP_USER_SQL, [],
  (transaction, resultSet) => {
   alert("删除数据表成功")
  }, (transaction, error) => {
   alert("删除数据表失败:" + error.message)
  })
 })
 }

 /**
 * 点击事件 增删查改
 */
 let btnCreate = findId("btn-create");
 let btnInsert = findId("btn-insert");
 let btnQuery = findId("btn-query");
 let btnUpdate = findId("btn-update");
 let btnDelete = findId("btn-delete");
 let btnDrop = findId("btn-drop");
 btnCreate.onclick = () => createTable();
 btnInsert.onclick = () => insertData(user);
 btnQuery.onclick = () => queryData();
 btnUpdate.onclick = () => {
 user.password = "111666666"; //修改密码
 updateData(user);
 };
 btnDelete.onclick = () => deleteData(user);
 btnDrop.onclick = () => dropTable();

</script>
</body>
</html>

热心网友

一、http缓存
http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下，浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件，chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求，在有缓存的情况下判断过程主要分3步：
判断expires，如果未过期，直接读取http缓存文件，不发http请求，否则进入下一步
判断是否含有etag，有则带上if-none-match发送请求，未修改返回304，修改返回200，否则进入下一步
判断是否含有last-modified，有则带上if-modified-since发送请求，无效返回200，有效返回304，否则直接向服务器请求

如果通过etag和last-modified判断，即使返回304有至少有一次http请求，只不过返回的是304的返回内容，而不是文件内容。所以合理设计实现expires参数可以减少较多的浏览器请求。
二、websql
websql这种方式只有较新的chrome浏览器支持，并以一个规范形式出现，主要有以下特点
Web Sql 数据库API 实际上不是HTML5规范的组成部分；
在HTML5之前就已经存在了，是单独的规范；
它是将数据以数据库的形式存储在客户端，根据需求去读取；
跟Storage的区别是： Storage和Cookie都是以键值对的形式存在的；
Web Sql 更方便于检索，允许sql语句查询；
让浏览器实现小型数据库存储功能；
这个数据库是集成在浏览器里面的，目前主流浏览器基本都已支持；
websql API主要包含三个核心方法：
openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction : 这个方法允许我们根据情况控制事务提交或回滚。
executeSql : 这个方法用于执行真实的SQL查询。
openDatabase方法可以打开已经存在的数据库，不存在则创建
var db = openDatabase('mydatabase', '2.0', my db', 2 * 1024);
openDatabasek中五个参数分别为：数据库名、版本号、描述、数据

全部频道

九种浏览器端缓存方法知多少