重学前端 HTML5 Web 存储（缓存）其他已经废弃（第八天）

PBitW

已于 2024-01-15 14:19:54 修改

阅读量431

点赞数

分类专栏：重学前端1 HTML 文章标签： web存储 web数据库应用程序缓存 Storage区别

于 2020-07-29 20:25:08 首次发布

本文链接：https://blog.csdn.net/langwang_100/article/details/107668649

版权

重学前端1 HTML 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

文章目录

HTML5 Web 存储（缓存）
HTML5 Web SQL 数据库（不用学习）
HTML5 应用程序缓存（不用学习）

HTML5 Web 存储（缓存）

使用HTML5可以在本地存储用户的浏览数据。

早些时候，本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速.。这些数据不会被保存在服务器上，只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。

数据以键/值对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

localStorage ：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
sessionStorage ：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

提示：
键/值对通常以字符串存储，你可以按自己的需要转换该格式。

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

sessionStorage 对象：
sessionStorage 方法针对一个 session 进行数据存储，当用户关闭浏览器窗口后，数据会被删除。
在这里插入图片描述

菜鸟2024/1/15来修改这篇文章的时候发现，下面两个已经成为历史，难怪菜鸟从来没有使用到，下面两个的替代为：Service Workers 和 IndexedDB，后续菜鸟会进行更新的！

HTML5 Web SQL 数据库（不用学习）

2024/1/15补充：
虽然 Web SQL Database 提供了方便的 SQL 接口，但由于它并没有成为标准的一部分，并且在 Web 标准中已被废弃，因此在现代的 Web 开发中更推荐使用 IndexedDB 来进行客户端存储。

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 API。（并不是所有浏览器都支持，eg：Firefox）

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚
executeSql：这个方法用于执行实际的 SQL 查询

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库（×），使用代码如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase()方法对应的五个参数说明：

数据库名称
版本号
描述文本
数据库大小
创建回调

注意：

第五个参数，创建回调会在创建数据库后被调用
这里菜鸟尝试了一下，并没有生成，所以最好还是自己创建一个！

执行查询操作

执行操作使用 database.transaction() 函数：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

上面的语句执行后会在 ‘mydb’ 数据库中创建一个名为 LOGS 的表。

插入数据

在执行上面的创建表语句后，我们可以插入一些数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

我们也可以使用动态值来插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 “?”。

读取数据

以下实例演示了如何读取数据库中已经存在的数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});
 
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
    
   }, null);
});

删除记录

删除记录使用的格式如下：

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

删除指定的数据id也可以是动态的：

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

更新记录

更新记录使用的格式如下：

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

更新指定的数据id也可以是动态的：

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

HTML5 应用程序缓存（不用学习）

2024/1/15补充：
需要注意的是，应用程序缓存在现代 Web 开发中已经不再推荐使用，因为它存在一些问题，比如难以调试、缓存不易更新等。推荐使用更现代的离线解决方案，例如 Service Workers 和 IndexedDB。

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

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

Cache Manifest 基础

如需启用应用程序缓存，请在文档的< html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。

manifest 文件的建议的文件扩展名是：“.appcache”。

请注意：

manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”，必须在 web 服务器上进行配置。

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST ：在此标题下列出的文件将在首次下载后进行缓存
NETWORK ：在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK ：在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件，然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的 NETWORK 小节规定文件 “login.php” 永远不会被缓存，且离线时是不可用的：

NETWORK:
login.php

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*

FALLBACK

下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 “offline.html” 替代 /html5/ 目录中的所有文件：

FALLBACK:
/html/ /offline.html

注意：

第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

实例 - 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的说明

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

注意：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

PBitW

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
重学前端 HTML5 Web 存储（缓存）其他已经废弃（第八天）

HTML5 Web 存储（缓存）HTML5 Web SQL 数据库（不用学习）打开数据库执行查询操作插入数据读取数据删除记录更新记录HTML5 应用程序缓存（不用学习）Cache Manifest 基础Manifest 文件CACHE MANIFESTNETWORKFALLBACK更新缓存关于应用程序缓存的说明
复制链接

扫一扫