JS进阶DAY5|本地存储

嗨～👋 欢迎来到JavaScript本地存储的世界。在这里，我们可以像烘焙师一样，将数据烘焙成小饼干（cookies），或者将它们保存在冰箱（localStorage）里，以便下次访问时能够快速取用。🍰🧊 今天，我们将一起学习如何在用户的浏览器中保存和管理这些数据小点心。

[1. 甜蜜小点心：Cookies](#1. 甜蜜小点心：Cookies)

[1.1 创建Cookies](#1.1 创建Cookies)

[1.2 读取Cookies](#1.2 读取Cookies)

[1.3 删除Cookies](#1.3 删除Cookies)

[2. 冰箱存储：localStorage和sessionStorage](#2. 冰箱存储：localStorage和sessionStorage)

[2.1 localStorage：长期保存](#2.1 localStorage：长期保存)

简单数据类型

复杂数据类型

[2.2 sessionStorage：临时保存](#2.2 sessionStorage：临时保存)

[3. 存储限制](#3. 存储限制)

[4. 安全性注意事项](#4. 安全性注意事项)

1. 甜蜜小点心：Cookies

Cookies是服务器发送到用户浏览器的小块数据。它们可以被用来识别用户和存储会话信息。

1.1 创建Cookies

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

在这个例子中，我们创建了一个名为 username 的cookie，值为 John Doe ，并设置了过期时间。

1.2 读取Cookies

javascript 复制代码

function getCookie(name) {

  let cookieArray = document.cookie.split(';');

  for(let i = 0; i < cookieArray.length; i++) {

    let cookie = cookieArray[i].trim();

    if (cookie.indexOf(name + "=") == 0) {

      return cookie.substring(name.length + 1, cookie.length);

    }

  }

  return "";

}

console.log(getCookie("username")); // 输出: John Doe

这个函数可以帮助我们从浏览器中读取名为 username 的cookie。

1.3 删除Cookies

javascript 复制代码

function deleteCookie(name) {

  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';

}

deleteCookie("username");

通过设置过期时间为过去的时间，我们可以删除指定的cookie。

2. 冰箱存储：localStorage和sessionStorage

localStorage和sessionStorage是Web存储API的一部分，它们提供了一种在用户浏览器中存储数据的方式。

2.1 localStorage：长期保存

简单数据类型

javascript 复制代码

// 保存数据

localStorage.setItem('favColor', '#ff0000');

// 读取数据

console.log(localStorage.getItem('favColor')); // 输出: #ff0000

// 删除数据

localStorage.removeItem('favColor');

localStorage中的数据没有过期时间，会一直保存直到主动删除。

复杂数据类型

javascript 复制代码

// 创建一个对象

let user = {

  name: "Alice",

  age: 25,

  hobbies: ["reading", "coding"]

};

// 将对象转换为字符串并存储

localStorage.setItem('user', JSON.stringify(user));

// 从localStorage读取字符串，并转换回对象

let storedUser = localStorage.getItem('user');

let user = JSON.parse(storedUser);

console.log(user.name); // 输出: Alice

// 删除存储的对象

localStorage.removeItem('user');

2.2 sessionStorage：临时保存

javascript 复制代码

// 保存数据

sessionStorage.setItem('sessionKey', 'sessionValue');



// 读取数据

console.log(sessionStorage.getItem('sessionKey')); // 输出: sessionValue



// 删除数据

sessionStorage.removeItem('sessionKey');

sessionStorage中的数据仅在页面会话期间有效，关闭标签页后数据会被清除。

3. 存储限制

Cookies的大小限制通常为4KB。

localStorage和sessionStorage的大小限制通常为5MB左右，但这个值可能因浏览器而异。

4. 安全性注意事项

由于存储在客户端，这些数据容易被篡改。因此，敏感信息不应存储在本地。

使用HTTPS来保护传输过程中的数据不被窃取。

好啦，亲爱的朋友们，我们今天的JavaScript本地存储之旅就到这里啦！🚀 希望你们喜欢这次的探险，并且学到了一些新知识。掌握本地存储是前端开发中非常基础且重要的技能，它可以让你的应用更加个性化和高效。如果你有任何疑问，或者想要更多地了解这个话题，随时欢迎留言哦！我们下次再见啦！👋