JS如何使用sessionStorage实现计数器功能

itclanCoder
1,475 阅读3分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

当你掌握了localStorage的使用后,针对sessionStorage也是一样的,它也是本地存储的一种方式,它是临时会话存储,有时,是需要利用sessionStorage来保存某些数据,比如:表格的分页,还有购物车的商品信息,判断是不是首次进入页面等

单独把sessionStorage出来,以一个效果为例,对比localStorage如何使用sessionStorage实现计数器功能,就可以很明显的知道它们两者之间的一个差异

具体示例

具体的示例效果可以点击此链接JS如何使用sessionStorage实现计数器

以上的加减计数器,就使用了sessionStorage,设置了sessionStorage,只在当前窗口有效,当关闭窗口时,sessionStorage就失效了的,这一点是有别于localStorage永久存储的,除非手动删除,而sessionStorage关闭了窗口,sessionStorage设置的值就会消失

API的使用上,两者都是相似的,设置sessionStorage使用的是sessionStorage.setItem('key',val),而获取sessionStorage的值是使用

sessionStorage.getItem('key')

具体代码如下所示

<template>
  <div class="wrap">
    <div class="content">
          <el-input-number v-model="num" @change="handleChange" :min="1"></el-input-number>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            num: 1,
        }
    },
    mounted() {
      // this.num = sessionStorage.getItem('number') || 1;
      // 等价于
      this.num = sessionStorage.number || 1;
    },
    methods: {
      handleChange(val) {
        console.log(val);
        //sessionStorage.setItem('number',val)
        // 等价于如下
        sessionStorage.number = val;
      }
    },
  };
</script>
<style>
  .wrap {
    text-align: center;
  }
</style>

主要的核心代码是 设置sessionStorage使用的是sessionStorage.setItem('key',val)

// 常用,一把都是用的API
sessionStorage.setItem('key',val)
// 或者,如下所示,这里的key是你自己设置的存储的字段,val是要具体存入sessionStorage的值
sessionStorage.key = val;

而获取sessionStorage使用的是sessionStorage.getItem('key')

// 常用
sessionStorage.getItem('key');
// 或者
sessionStorage.key

本地存储的方法与区别

相同点

都是在本地(浏览器端)存储数据

不同点

cookie由服务端写入,而localStorage,sessionStorage由前端写入

生命周期

cookie由服务器端在写入的时候就设置好的,而localStorage是写入就一直存在,除非手动清除,sessionStorage是页面关闭的时候就清除

存储大小

cookie的存储空间比较小,大概4KB,sessionStorage,localStorage存储空间比较大,大概5M

同源原则

cookie,sessionStorage,LocalStorage数据都遵循同源原则,其中sessionStorage还限制必须是同一个页面

在前端给后端发送请求的时候,会自动携带cookie中的数据,但是sessionStorage不会

应用场景

Cookie一般用于存储登录验证信息sessionID或者token,localStorage常用语存储不易变动的数据,需要持久化的数据,减轻服务器的压力,sessionStorage可以用来监测用户是否刷新进入页面。

总结

使用sessionStorage与localStorage的用法相似,sessionStorage,是一种临时存储,可以用于存储大量的数据,只不过它是针对当前的session会话临时存储的,当关闭了浏览器窗口以后,这个数据就丢失了的

也就是不同的新标签页,sessionStorage是相互独立的,只要关闭了当前浏览器窗口,那么设置的sessionStorage就会丢失

如果需要永久性存储,保持某个数据的状态,即使关闭浏览器,也存在,那么就用localStorage,如果只需要临时存储,那么就用sessionStorage

本文只是用一个加减数字,作为演示的,在实际开发中,多多熟悉下就可以了的,自己动手写个例子,打开控制台开发者工具,看下数据的状态,对比一下,就知道两者的一个区别了的

如果有不明白的,也可以多多在下方多多交流

avatar
文章
阅读
粉丝