web本地存储的使用和在vue中的封装（localStorage，sessionStorage ）

目录

什么是本地存储？

localStorage和sessionStorage的区别

localStorage和sessionStorage的使用方法（使用方法是一样的）

开始封装本地存储（以sessionStorage为例）

---

什么是本地存储？

1.通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

2.在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

3.与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。

---

localStorage和sessionStorage的区别

简单了解就是：如果用localStorage存储数据的话，当客户把浏览器关闭了之后数据仍然不会销毁

反之用sessionStorage 存储数据的话，当客户把浏览器关闭了之后数据就会销毁

---

localStorage和sessionStorage的使用方法（使用方法是一样的）

//存  （变量名字(key)，值(value)）
localStorage.setItem(key,value); 
sessionStorage.setItem(key,value);

//取（变量名字(key)）
localStorage.getItem(key); 
sessionStorage.getItem(key);

//删（变量名字(key)）
localStorage.removeItem(key); 
sessionStorage.removeItem(key);

---

开始封装本地存储（以sessionStorage为例）

1.首先新建一个storage.js文件夹(文件夹名字叫什么都可以)

export function getToken(key) {    //取
    return sessionStorage.getItem(key)
}
export function setToken(key, value) {  //存
    return sessionStorage.setItem(key, value)
}

export function removeToken(key) { //删
    return sessionStorage.removeItem(key)
}

2.在需要的页面进行引用

<template>
  <div>
    
  </div>
</template>

<script>
import { setToken, getToken, removeToken } from "../../utils/storage.js";
export default {
  data() {
    return {
      dataInfo: [
        {
          name: "苹果",
          count: 0,
          price: 10.01,
          check: false,
          imgUrl:
            "https://img-blog.csdnimg.cn/b21b6c6ec4fd4be1a3467adf3e9fc460.png",
        },
        {
          name: "桃子",
          count: 0,
          price: 22.11,
          check: false,
          imgUrl:
            "https://img-blog.csdnimg.cn/7468e3fe65d549ac87d6f7ea40d831a6.png",
        },
        {
          name: "蛇果",
          count: 0,
          price: 10.11,
          check: false,
          imgUrl:
            "https://img-blog.csdnimg.cn/c620d20124e346fa93407c7ae9ab13b6.png",
        },
      ],
    };
  },
  mounted() {
    setToken("list", JSON.stringify(this.dataInfo)); //存
    getToken("list"); //取
    removeToken("list"); //删
    
    //如果是当前使用把删除先刚掉
    //在项目中使用的时候以需求为准
  },
};
</script>