JS本地存储

cookie

Cookie用于储存不超过 4KB 的小型文本数据；可设置数据过期时间。

// 设置cookie
function setCookie(name, value, daysToLive) {let cookie = name + "=" + encodeURIComponent(value);if (typeof daysToLive === "number") {cookie += "; max-age=" + (daysToLive*24*60*60); // 将天数转换为秒数}document.cookie = cookie;
}// 获取cookie
function getCookie(name) {const cookies = document.cookie.split("; ");for (let i = 0; i < cookies.length; i++) {const [cookieName, cookieValue] = cookies[i].split("=");if (name === cookieName) {return decodeURIComponent(cookieValue);}}return "";
}// 清除 cooie
// 这将会设置cookie的过期时间为1970年1月1日，实际上即时删除了这个cookie。
function clearCookie(name) {document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}// 使用示例
setCookie("username", "John Doe", 7); // 存储一个名为"username"的cookie，有效期为7天
console.log(getCookie("username")); // 输出: John Doe
clearCookie('username'); // 清除username

sessionStorage

会话存储；sessionStorage用于储存不超过5MB的文本数据，页面（会话）关闭，sessionStorage 将会自动删除数据；

key和value都必须是字符串

// 存储数据
sessionStorage.setItem('key', 'value');// 读取数据
let data = sessionStorage.getItem('key');// 删除数据
sessionStorage.removeItem('key');// 清空所有数据 清空当前页面中的本地存储(sessionStorage)数据
sessionStorage.clear();

localStorage

key和value都必须是字符串

本地存储 ；localStorage用于储存不超过5MB的文本数据，持久化的本地存储，除非主动删除数据，否则数据是永不过期；

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

// 存储数据
localStorage.setItem('key', 'value');// 读取数据
let data = localStorage.getItem('key');// 删除数据
localStorage.removeItem('key');// 清空所有数据 清空当前页面中的本地存储(localStorage)数据
localStorage.clear();

注意：

localStorage和sessionStorage只能存储字符串。如果需要存储对象，可以使用JSON.stringify()将对象转换为字符串，读取时使用JSON.parse()将字符串转换回对象。

例如：

明确

1、typeof关键字检测数据类型后的返回值的数据类型是 string

2、Json 对象所存储的值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null

let personMessage = {name: "李华",age: "17岁",address: "云南昆明",};let num1 = 10000;let str1 = '"我是一个测试字符串"';let arr1 = [1, 2, 3, 4, 5, 6, 7];let obj1 = [{ age: 12, name: "小明" },{ age: 13, name: "小红" },];// 存function setDateLocal(dateName, date) {// 如果传入的数据类型时对象，那么就转为字符串后再存储if (typeof date == "object") {localStorage.setItem(dateName, JSON.stringify(date));} else {localStorage.setItem(dateName, date);}}// 取function getDateLocal(dateName) {// 对于 str1 取数据会报错，所以在存储前，给str1额外多加上一层单引号就行了// 使用try...catch...来打印可能抛出异常的异常信息try {JSON.parse(localStorage.getItem(dateName));} catch (error) {console.log(error);}// 如果需要取出的数据原本是对象类型，那么就在返回数据前转为对象再返回if (typeof JSON.parse(localStorage.getItem(dateName)) == "object") {return JSON.parse(localStorage.getItem(dateName));} else {return localStorage.getItem(dateName);}}// 移除某个本地存储值function delDateLocal(dateName) {localStorage.removeItem(dateName);}// 移除所有function delAllDateLocal() {localStorage.clear();}setDateLocal("personMessage", personMessage);console.log("personMessageCopy", getDateLocal("personMessage"));setDateLocal("num1", num1);console.log("num1", getDateLocal("num1"));// 对于num1而言，number转为string存储在本地，在取出时从string再转为numbersetDateLocal("str1", str1);console.log("str1", getDateLocal("str1"));setDateLocal("arr1", arr1);console.log("arr1", getDateLocal("arr1"));setDateLocal("obj1", obj1);console.log("obj1", getDateLocal("obj1"));// delDateLocal("arr1");// delAllDateLocal();