技巧：如何在不刷新页面的情况下获取cookie/localStorage的值？

62 阅读 0 评论 41 点赞

我是靠谱客的博主阳光月亮，最近开发中收集的这篇文章主要介绍技巧：如何在不刷新页面的情况下获取cookie/localStorage的值？，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

引言

故事的背景：在一个页面内，通过路由给在同一个页面的组件传递参数。显然可以通过 Vue路由跳转伴随传递参数这篇文章的多种方式进行传值。

路由传递参数的文件：label.vue

<router-link to='/Home/label/label_show' v-for="(item,index) in labels.label" :key="item">

methods: {
	        push_data(label) {
	            localStorage.setItem("label",label);	//将数据存在 localStorage 中
	        }
      	}

然而路由传递参数后，接收参数的那个页面必须通过 mounted 首次刷新后才生效，也就是说必须有刷新页面这一过程。
但是现在，我们路由传递是在同一个页面内，想要实时获取参数变化，就不能去刷新页面。

那么要怎么去获取呢？
首先我想的是把参数值存在 cookies 中，然后再通过读取获得值。当我运行后，发现 cookies 的值需要在 HTTP Request 请求下才更新（也就是要刷新页面，所以failed！）

接着，我想到用 localsStorage 去设置和读取值，localStorage 可以实时更新数据。当然它以 localStorage.get('name') 直接获取更新后的值。所以我就通过JS的定时器，定时10ms进行一次以 localStorage.get('name')方式的读值，这样就接近实时获取参数的值了。并且 localsStorage 的优点还是可以长时间存储该值，不会像cookie那样有一定的时间范围。

接收路由参数的文件：label_show.vue

mounted() {
        this.rd_article();
        this.getlabel();
        // console.log(localStorage.getItem('label'));
    },
methods:{
	      getlabel() {
	          const self = this;
	          // 通过定时器来实现 "实时" 获取 localStorage 的值 (优点:不需要刷新当前页面；缺点:有可能影响页面性能)
	          setInterval(function () {
	              var label = '';
	              label = localStorage.getItem('label'); // 获取 localstorage 中 label 的值
	              console.log(label);
	          },10);
	      }
      }