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

itclanCoder
2,456 阅读3分钟

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

前言

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

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

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

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

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

具体示例

示例效果可见JS如何使用localStorage实现计数器功能

以上的加减计数器,使用了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

以上就是设置localStorage和获取localStorage的方法,一般使用setItem('key',val)与getItem('key')比较多的

下面讲一下本地存储的方法的一些区别,有时候,在面试的时候,会被经常问到

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

相同点

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

不同点

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

生命周期

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

存储大小

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

同源原则

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

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

应用场景

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

总结

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

他们之间的一个区别主要从生命周期，存储大小,同源策略，写入方式这几点去做比较的 在API的使用上localStorage与sessionStorage都差不多

有的同学对本地存储有一种恐惧的心里,尤其是新手,其实是比较简单的,自己动手写个示例,立马就清晰了的

如果大家有对本地存储localStorage不清楚的,欢迎评论区一起交流,加油!

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

avatar
文章
阅读
粉丝