H5新增储存方案SessionStorage和LocalStorage

最新推荐文章于 2024-05-11 13:07:38 发布

山竹回家了

最新推荐文章于 2024-05-11 13:07:38 发布

阅读量375

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_47886687/article/details/113842690

版权

前端专栏收录该内容

122 篇文章 6 订阅

订阅专栏

本文介绍了前端开发中用于存储数据的Cookie、SessionStorage和LocalStorage的定义、区别、应用场景及注意事项，并通过示例展示了如何进行增删改查操作。重点突出了它们在生命周期、容量和网络请求行为上的差异，以及在登录状态、表单数据和购物车数据存储方面的应用。

摘要由CSDN通过智能技术生成

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>