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

http://mpvideo.qpic.cn/0b2esuabeaaakmag6bliabrvbfodckkqaeqa.f10002.mp4?dis_k=0168ae8cae63904a361d3913c5c9631d&dis_t=1670378772&vid=wxv_2654156498763464709&format_id=10002&support_redirect=0&mmversion=false

前言

在HTML5之前,客户端本地存储只能依赖于cookie,它由服务器端在写入的时候就设置好的,cookie的效率也很低,而且使用不方便,安全性也不高

自从html5出来后,html5带来了全新的本地存储功能,一个是localStorage,另一个是sessionStorage

前者是只要在前端一写入,就会一直存在,除非手动清除,后者是关闭浏览器的时候就会清除

在开发的时候,很多地方都会用到localStorage,和sessionStorage比如:表格的分页,一刷新保持当前页的状态,三级路由Tab的一个切换激活状态,用到的就是localStorage,sessionStorage可以用来监测用户是否刷新进入页面

今天使用localStorage实现一个计数器的功能

01

具体示例

JS如何使用localStorage实现计数器功能(https://coder.itclan.cn/fontend/js/31-localstorage-count-num/)

以上的加减计数器,使用了localStorage,无论是关闭浏览器,还是重新打开一个新的窗口,localStorage设置的值,都会永久存储在硬盘里,除非手动删除

一直都是在的,这个在实际开发中,有些地方式有这个需求的,比如:购物车,还有表格分页等等,如果你想持久的保持某个数据状态,那么就可以使用localStorage

如下是简易代码

<template>
  <div class="wrap">
    <div class="content">
          <el-input-number v-model="num" @change="handleChange" :min="1"  label="描述文字"></el-input-number>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
        return {
            num: 1,
        }
    },
    mounted() {
      // this.num = localStorage.getItem('number') || 1;
      // 等价于
      this.num = localStorage.number || 1;
    },
    methods: {
      handleChange(val) {
        console.log(val);
        //localStorage.setItem('number',val)
        // 等价于如下
        localStorage.number = val;
      }
    },
  };
</script>
<style>
  .wrap {
    text-align: center;
  }
</style>

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

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

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

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

02

百前端浏览器本地存储

相同点

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

不同点

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

生命周期

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

存储大小

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

同源原则

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

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

应用场景

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

总结

使用localStorage做持久化存储非常简单,用于存储大量的数据,这一点cookie是无法做到的