js 数据存储和DOM编程

2023年6月10日上午11:58 • JavaScript

JS 数据存储和 DOM 编程攻略

概述

JavaScript 是一种具有灵活性和交互性的编程语言，它在 Web 开发中扮演着重要的角色。其中，数据存储是支撑 Web 应用程序的关键之一，DOM 编程则是实现动态 Web 应用程序的重要手段之一。

本攻略将向您介绍如何使用 JS 实现数据存储和 DOM 编程的基本知识。本攻略分为以下两个部分：

JS 数据存储
DOM 编程

JS 数据存储

在 Web 应用程序中，我们需要将数据存储到客户端（浏览器端）或服务器端。JS 提供了许多数据存储的解决方案，包括 cookie、localStorage、sessionStorage 和 IndexedDB 等。

Cookie

cookie 是关键-值对存储在浏览器中的文本文件，具有以下特点：

保存在客户端；
大小为 4KB 左右；
可以设置过期时间；
跨同一个域名的网页之间传输。

以下是设置 cookie 的示例：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

localStorage

localStorage 使我们可以将关键-值对持久化到浏览器本地存储中，即使用户关闭浏览器也不会丢失这些数据。localStorage 具有以下特点：

保存在客户端；
可以存储大量的数据；
不会随着会话的结束而丢失；
JavaScript 可以访问。

以下是使用 localStorage 存储和获取数据的示例：

localStorage.setItem("username", "John Doe");
const username = localStorage.getItem("username");
console.log(username); // "John Doe"

sessionStorage

sessionStorage 与 localStorage 相似，不同之处在于 sessionStorage 的数据在会话结束后就会被删除，数据也仅可以在同一个窗口或标签页中被访问。

以下是使用 sessionStorage 存储和获取数据的示例：

sessionStorage.setItem("username", "John Doe");
const username = sessionStorage.getItem("username");
console.log(username); // "John Doe"

IndexedDB

IndexedDB 是一种可以存储结构化数据的客户端数据库，在浏览器内部存储数据。它允许我们以异步方式存储和检索大量的对象，支持索引和范围查询。IndexedDB 是完全异步的，并且使用基于 Promise 的 API。

以下是使用 IndexedDB 存储和获取数据的示例：

const request = indexedDB.open("myDatabase", 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("customers", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.transaction.oncomplete = function(event) {
    const customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerObjectStore.add({ id: 1, name: "John Doe", age: 30 });
  };
};

DOM 编程

DOM（文档对象模型）是一个应用程序编程接口（API），它提供了一种用于 HTML 和 XML 文档的访问和操作的模式。通过使用 DOM，我们可以通过 JavaScript 更改 HTML 和 CSS。

以下是使用 DOM 修改 HTML 的示例：

<!DOCTYPE html>
<html>
<body>

<p id="demo">JavaScript 可以改变这个段落的内容。</p>

<button onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}
</script>

</body>
</html>

以上代码用按钮触发 JavaScript 函数，将 HTML 段落文本更改为“Hello World!”。

以下是使用 DOM 修改 CSS 的示例：

<!DOCTYPE html>
<html>
<head>
  <title>DOM 编程</title>
  <style>
    #demo {
      color: red;
      font-size: 36px;
    }
  </style>
</head>
<body>

<p id="demo">JavaScript 可以更改这段文本的颜色和字体大小。</p>

<button onclick="myFunction()">点击我</button>

<script>
function myFunction() {
  const x = document.getElementById("demo");
  x.style.color = "blue";
  x.style.fontSize = "48px";
}
</script>

</body>
</html>

以上代码用按钮触发 JavaScript 函数，将 HTML 段落文本的字体颜色更改为蓝色，字体大小更改为 48px。

总结

JavaScript 有许多数据存储解决方案和 DOM 编程方法。本攻略介绍了 cookie、localStorage、sessionStorage 和 IndexedDB 数据存储解决方案，以及使用 DOM 修改 HTML 和 CSS 的示例。根据您的需求，选择适当的方法来存储数据和编写动态的 Web 应用程序。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js 数据存储和DOM编程 - Python技术站