c语言编程笔录

首页 >   > 笔记大全

笔记大全

HTML5中web是什么 web存储中的元素有哪些

更新时间：2023-06-25

前言

Web是指“全球信息网（World Wide Web）”的简称，是一种通过互联网访问的方式来共享信息和交流的系统。Web技术是建立在互联网基础上的一系列技术和标准的集合，其核心是HTML5。

一、Web存储介绍

Web存储指的是在客户端（浏览器）中存储数据的能力。在HTML5中，提供了三种主要的Web存储机制，分别是LocalStorage、SessionStorage和WebSQL。

1. LocalStorage（本地存储）

LocalStorage机制是HTML5提供的一种持久性存储机制，数据存储在浏览器的本地，不会过期。通过LocalStorage，我们可以在浏览器中存储大量的数据，包括文本、JSON对象等。

// 代码示例：存储数据到LocalStorage
localStorage.setItem('key', 'value');

// 代码示例：从LocalStorage读取数据
var value = localStorage.getItem('key');

2. SessionStorage（会话存储）

SessionStorage机制与LocalStorage类似，但数据在会话结束后会自动清除。如果用户关闭了浏览器标签或窗口，SessionStorage中的数据也会被删除。

// 代码示例：存储数据到SessionStorage
sessionStorage.setItem('key', 'value');

// 代码示例：从SessionStorage读取数据
var value = sessionStorage.getItem('key');

3. WebSQL（数据库存储）

WebSQL是一种使用SQL语句操作的客户端数据库，可以存储和查询数据。不过需要注意的是，WebSQL在HTML5标准中被废弃，不再推荐使用。

// 代码示例：创建WebSQL数据库
var db = openDatabase('myDatabase', '1.0', 'My Database', 2 * 1024 * 1024);

// 代码示例：执行SQL查询
db.transaction(function(tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS myTable (id unique, data)');
  tx.executeSql('INSERT INTO myTable (id, data) VALUES (1, "Hello")');
});

二、Web存储元素

Web存储的元素是指存储在LocalStorage、SessionStorage或WebSQL中的数据项。可以通过键值对的形式来存储和访问数据。

1. 存储数据

可以使用setItem()方法将数据存储到Web存储中，需要提供一个唯一的键和对应的值。

// 代码示例：存储数据到LocalStorage
localStorage.setItem('key', 'value');

// 代码示例：存储数据到SessionStorage
sessionStorage.setItem('key', 'value');

// 代码示例：存储数据到WebSQL
db.transaction(function(tx) {
  tx.executeSql('INSERT INTO myTable (id, data) VALUES (1, "Hello")');
});

2. 读取数据

可以使用getItem()方法根据键来读取存储在Web存储中的数据。

// 代码示例：从LocalStorage读取数据
var value = localStorage.getItem('key');

// 代码示例：从SessionStorage读取数据
var value = sessionStorage.getItem('key');

// 代码示例：从WebSQL读取数据
db.readTransaction(function(tx) {
  tx.executeSql('SELECT * FROM myTable', [], function (tx, results) {
    var row = results.rows.item(0);
    console.log(row.data);
  });
});

3. 删除数据

可以使用removeItem()方法根据键来删除Web存储中的数据。

// 代码示例：从LocalStorage删除数据
localStorage.removeItem('key');

// 代码示例：从SessionStorage删除数据
sessionStorage.removeItem('key');

// 代码示例：从WebSQL删除数据
db.transaction(function(tx) {
  tx.executeSql('DELETE FROM myTable WHERE id = ?', [1]);
});

4. 清空数据

可以使用clear()方法来清空Web存储中的所有数据。

// 代码示例：清空LocalStorage中的数据
localStorage.clear();

// 代码示例：清空SessionStorage中的数据
sessionStorage.clear();

// 代码示例：清空WebSQL中的数据
db.transaction(function(tx) {
  tx.executeSql('DELETE FROM myTable');
});

总结

通过Web存储机制，我们可以在浏览器中存储和访问数据，提供了丰富的数据存储和操作方式。

LocalStorage提供了持久性存储，SessionStorage提供了会话级别的存储，WebSQL则提供了数据库式的数据存储。在使用时需要注意使用合适的存储机制，并合理管理存储的数据。

图文推荐