一文读懂：如何在浏览器中存储、拿取、删除数据？

前言

浏览器中的存储、拿取、删除数据，是我们日常使用互联网时必不可少的一部分。无论是网站登录信息、购物车缓存、还是个人偏好设置，这些数据都深深地影响着我们的网络体验。那么，如何更有效地管理这些数据？本文将为您详细介绍浏览器中存储、拿取、删除数据的方法。

---

以 localStorage 作为示例

存储

export default {
  data() {
    return {
      // 默认给的用户名密码
      loginForm: {
        username: "晚安.",
        password: "123456",
      },
    };
  },
    methods: {
    login() {
      if (this.loginForm.password === "123456" && this.loginForm.username === "晚安.") {
        // 登录成功之后将用户名密码保存到中 localStorage
        localStorage.setItem("key", JSON.stringify(this.loginForm));
      }
    },
  },
};

浏览器存储信息

---

拿取

 created() {
    var num = JSON.parse(localStorage.getItem("key"));
    console.log(num);
  },

浏览器打印信息

---

删除

//删除 localStorage中所有的数据
window.localStorage.clear(); 

//删除 localStorage中某个键值对
localStorage.removeItem('key');  

---

实现效果

---

同理，如果是 sessionStorage 存、拿、删的话，只需要把 localStorage 换成 sessionStorage 即可。