vue中localstorage的用法

àì夳堔傛蜴生んèń 2021-07-26 02:16 724阅读 0赞

# vue中需要将内容存储到本地缓存中 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
这个地方的“文件数量”是从子组件中传递过来的，如果不进行处理，当此页面刷新时，数据会清空为0.  
此时可以考虑将数据存储到本地缓存中。

### 子组件代码 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20200509093839198.png]

### 子组件往父组件事件处理 ###

submit() { 
       console.log("提交成功");
       this.$emit("closemask", this.chooseList);
       console.log(this.chooseList);
    }

### 父组件事件处理 ###

![在这里插入图片描述][2020050909402526.png]

<choose-file v-if="isUploadDialogVisible" :num="2" @click.stop @closemask="closemask" 		:chooseList="chooseList">
    </choose-file>

### 父组件中事件处理及存储本地缓存 ###

closemask(value) { 
            this.isUploadDialogVisible = false;
            this.chooseList = value;
            localStorage.setItem('chooseList', JSON.stringify(this.chooseList));
     }

### 父组件获取本地缓存 ###

vue中获取本地缓存可以从created创建周期函数中进行获取，从beforeMount挂载之前周期函数中进行保存到data中。这样就可以渲染到页面中了。注意created中还没有vue实例，所以如果在此时进行给data中的数据赋值，会报错。

created() { 
          getChooseList = JSON.parse(localStorage.getItem('chooseList'));
          if (getChooseList.length > 0) { 
            getChooseList = getChooseList;
          } else { 
            getChooseList = [];
          }
    },
     beforeMount() { 
          this.chooseList = getChooseList;
          console.log('挂载之前');
          console.log(this.chooseList)
    },

### localstorage ###

1.  **什么是localStorage**  
    对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage  
    sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载  
    localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在  
    所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是:  
    当我们首次访问设置Cookie的页面时，服务器会把设置的Cookie值通过响应头发送过来，告诉浏览器将cookie存储的本地相应文件夹中（注意:第一次访问时本地还没有存储Cookie,所以此时获取不到值）;  
    当第二次访问(或在进行cookie设置后,过期前所有的访问)时，请求头信息你中都会把Cookie值携带。(百度到的,暂时还没理解透彻,先搬过来)
2.  **使用方法**  
    注意:sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON,所以这里就只列举localStorage  
    //保存到本地缓存  
    `localStorage.setItem('hou', JSON.stringify(info));`  
    //获取本地缓存  
    `var data1 = JSON.parse(localStorage.getItem('hou'));`  
    //删除某个缓存  
    `localStorage.removeItem('hou');`  
    //删除所有缓存  
    `localStorage.clear();`  
    //监听缓存的变化  
    Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

window.addEventListener('storage', function (e) { 
    　　console.log('key', e.key); 
    　　console.log('oldValue', e.oldValue);
    　　console.log('newValue', e.newValue); 
    　　console.log('url', e.url);
    })```

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/452aca62add545bab760c4183b4549dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/32a0e1a6bf8f4949a5cc4fb140aa4a1a.png
[20200509093839198.png]: /images/20210725/c2abaf05c925430a8da0dd319fe22c0f.png
[2020050909402526.png]: /images/20210725/92da0815c00c41e5bce89f9794d524fd.png