H5新增储存方案SessionStorage和LocalStorage

1.什么是SessionStorage和LocalStorage?

和Cookie一样,SessionStorage和LocalStorage也是用于储存网页中的数据

2.Cookie、SessionStorage和LocalStorage的区别

生命周期(同一浏览器下):
Cookie:默认关闭浏览器后失效,但也可以设置过期时间.
SessionStorage:仅在当前会话(窗口)下有效,关闭窗口或浏览器后被清除,不能设置过期时间
LocalStorage:除非被清除,否则永久保存
容量:
Cookie:有大小(4KB左右)和合数(20~50)限制
SessionStorage:有大小限制(5M左右)
LocalStorage:有大小限制(5M左右)
网络请求:
Cookie:每次都会在HTTP头中,如果使用cookie保存过多数据会带来性能问题
SessionStorage:仅在浏览器中保存,不参与和服务器的通信
LocalStorage:仅在浏览器中保存,不参与和服务器的通信

3.Cookie、SessionStorage和LocalStorage的应用场景

Cookie:判断用户是否登录
SessionStorage:表单数据
LocalStorage:购物车

4.注意点

无论使用以上哪种储存方式,切记不能将敏感数据直接存储到本地,

5.增删改查

打开控制台看效果,这里示例sessionStorage,如果需要用LocalStorage,则将sessionStorage更改为LocalStorage即可.

<template>
  <div>
    <button @click="add">新增</button>
    <button @click="del">删除</button>
    <button @click="date">修改</button>
    <button @click="get">获取</button>
    <button @click="clear">删除所有保存的数据</button>
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    add() {
    
    
      sessionStorage.setItem("name", "山竹");
      sessionStorage.setItem("age", "18");
    },
    del() {
    
    
      sessionStorage.removeItem("name");
    },
    date() {
    
    
      sessionStorage.setItem("name", "杀生丸");
    },
    get() {
    
    
      let data = sessionStorage.getItem("name");
      console.log(data);
    },
    clear() {
    
    
      sessionStorage.clear();
    },
  },
};
</script>