JS本地存储

最新推荐文章于 2024-10-06 04:03:15 发布

发渐稀

最新推荐文章于 2024-10-06 04:03:15 发布

阅读量546

点赞数 6

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_64760783/article/details/139417399

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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再转为number

    setDateLocal("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();