# JS如何使用sessionStorage实现计数器

# 快速导航

# 前言

sessionStorage也是本地存储的一种方式,有时候,是需要利用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

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

1
2
3
4
5

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

// 常用
sessionStorage.getItem('key');
// 或者
sessionStorage.key
1
2
3
4

# 前端浏览器本地存储的方法与区别

# 相同点

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

# 不同点

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

# 生命周期

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

# 存储大小

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

# 同源原则

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

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

# 应用场景

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

# 总结

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

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

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

本文只是用一个加减数字,作为演示的,在实际开发中,多多熟悉下就可以了的

关注公众号

一个走心,有温度的号,同千万同行一起交流学习

加作者微信

扫二维码 备注 【加群】

扫码易购

福利推荐