在HTML中把自定义数据存储为页面或应用程序私有数据的方法

在网页开发过程中，常常需要将一些自定义数据存储为页面或应用程序的私有数据，以满足特定功能的需求。下面将介绍几种常见的方法。

首先是使用HTML5的data-*属性。这是一种简单且直接的方式，允许在HTML元素上添加自定义数据属性。例如：

<div data-user-id="123" data-user-name="John Doe">用户信息区域</div>

在JavaScript中，可以通过dataset属性轻松访问这些数据：

const div = document.querySelector('div');
const userId = div.dataset.userId;
const userName = div.dataset.userName;

这种方法适合存储与特定HTML元素相关联的少量数据，数据会随着元素的存在而存在，并且浏览器在解析HTML时不会对其进行特殊处理，保证了数据的私有性。

其次是利用浏览器的本地存储（localStorage）和会话存储（sessionStorage）。本地存储会将数据一直存储在浏览器中，除非主动清除；而会话存储则在页面会话期间有效，关闭浏览器窗口后数据会被清除。 使用本地存储的示例如下：

// 存储数据
localStorage.setItem('userData', JSON.stringify({ name: 'Jane', age: 30 }));
// 获取数据
const userData = JSON.parse(localStorage.getItem('userData'));

会话存储的使用方法与之类似，只需将localStorage替换为sessionStorage。它们适用于存储需要在不同页面间共享，但又不想发送到服务器的数据，为应用程序提供了一定的私有数据存储空间。

另外，Cookie也可用于存储自定义数据。虽然Cookie主要用于在客户端和服务器之间传递数据，但也能当作页面或应用程序的私有数据存储。不过，由于Cookie会在每次HTTP请求时发送到服务器，所以存储的数据量不宜过大。

// 设置Cookie
document.cookie = "userLang=en; path=/";
// 获取Cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

根据不同的需求，合理选择上述方法，能有效地在HTML中把自定义数据存储为页面或应用程序的私有数据，提升开发效率和用户体验。