js 临时保存数据

在JavaScript中，临时保存数据通常涉及到使用浏览器的本地存储机制。以下是一些基础概念和相关信息：

基础概念

LocalStorage:

优势: 数据持久化，即使浏览器关闭也不会丢失。
类型: 键值对存储，数据以字符串形式存储。
应用场景: 存储用户偏好设置、主题选择等长期需要保留的数据。

SessionStorage:

优势: 数据在当前会话期间有效，关闭浏览器标签或窗口后数据丢失。
类型: 键值对存储，数据以字符串形式存储。
应用场景: 存储临时数据，如表单输入内容、分步导航的状态等。

Cookies:

优势: 可以设置过期时间，适用于需要跨会话持久化的数据。
类型: 小型文本文件，存储键值对。
应用场景: 用户身份验证、跟踪用户行为等。

示例代码

LocalStorage

// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 获取数据
const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

// 删除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();

SessionStorage

// 存储数据
sessionStorage.setItem('tempData', 'TemporaryData');

// 获取数据
const tempData = sessionStorage.getItem('tempData');
console.log(tempData); // 输出: TemporaryData

// 删除数据
sessionStorage.removeItem('tempData');

// 清空所有数据
sessionStorage.clear();

Cookies

// 设置cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

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

const username = getCookie('username');
console.log(username); // 输出: JohnDoe

// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";