Vue入门(四)LocalStorage的使用

系统管理员 2022-12-24 10:56 523阅读 0赞

# 前言 #

这个系列是vue入门系列，在讲解的时候主要以例子，展示一些vue内容的基本用法。在vue项目中使用LocalStorage 的场景非常多，这里用一个小例子展示LocalStorage的使用。

# 案例 #

**一、LocalStorage 的作用**

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载.

localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在.

**二、根据localStorage实现的效果**

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

**三、vue项目代码**

目录结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70 1]

1、更改main.js 文件，添加 store 的引入

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      router,
      store,
      components: {  App },
      template: '<App/>'
    })

2、创建main.js 文件中引入store

store/index.js

import Vue from 'vue';
    import Vuex from 'vuex';
    import local from './localStoreDemo.js'
    
    
    Vue.use(Vuex)
    export default new Vuex.Store({ 
        modules: { 
            local
        }
    })

store/localStoreDemo.js

4、添加router/index.js 查询路径

import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import LocalStore from '@/components/LocalStore'
    
    Vue.use(Router)
    
    export default new Router({ 
      routes: [
        { 
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },{ 
          path:'/local',
          name:'LocalStore',
          component: LocalStore
        }
      ]
    })

5、由于router/index 中引入了LocalStore 模板，添加LocalStore.vue 模板

<template>
      <div>
        <div>{ {  dataLength }}</div>
        <button type="button" @click="handleAddData">添加随机数</button>
        <button type="button" @click="handleClear">清空随机数</button>
    
        <div v-for="dataItem in getData" :key="dataItem.red +'-'+dataItem.blue" :item="dataItem" @click="deleDataItem(dataItem)">{ { dataItem.red}}---{ { dataItem.blue}}--{ { dataItem.count}}</div>
        <menu-bar index="1"></menu-bar>
      </div>
    </template>
    
    <script>
    import MenuBar from "@/components/MenuBar.vue";
    import BallUtils from "@/util/BallUtils";
    import {  mapActions, mapGetters } from "vuex";
    import axios from "axios";
    export default { 
      name: "LocalStore",
      components: { 
        MenuBar,
      },
      methods: { 
        ...mapActions(["addDemoData", "clearDemoData", "deleteItem"]),
        handleAddData() { 
          this.randomRedBalls = BallUtils.randomRedBalls();
          this.randomBlueBall = BallUtils.randomBlue();
          this.addDemoData({ 
            redBalls: this.randomRedBalls,
            blueBall: this.randomBlueBall,
            count: 1,
          });
        },
        handleClear() { 
          this.clearDemoData();
        },
        deleDataItem(item) { 
          this.deleteItem(item);
        },
      },
      computed: { 
        ...mapGetters(["dataLength","getData"]),
      },
    };
    </script>

6、LocalStore.vue 中演示vue模板子父级的引用，这里贴出MenuBar.vue的使用

<template>
      
      <div class="div-height">
        <div class="menu" >
          <div class="col-xs-4 menu-item" :class="{'menu-item-activied':index=='1'}">
            <span class="glyphicon glyphicon-home"></span>
            <p>首页</p>
          </div>
          <div class="col-xs-4 menu-item" @click="addSelected">
            <span class="glyphicon glyphicon-shopping-cart"></span>
            <p>选号</p>
          </div>
          <div class="col-xs-4 menu-item" :class="{'menu-item-activied':index=='3'}">
            <span class="glyphicon glyphicon-user"></span>
            <p>我</p>
          </div>
        </div>
      </div>
    </template>
    
    <script>
        export default { 
            name: "MenuBar",
          props: { 
              index:{ 
                stype: 'String',
                default:"1"
              }
          },
          methods:{ 
            addSelected() { 
              this.$router.push("/select")
            }
          }
        }
    </script>
    
    <style scoped>
      .div-height{ 
        height: 50px;
      }
    
    </style>

7、LocalStore.vue 使用到了一个util文件也贴出来BallUtils.js

8、最后将页面的logo图片注释掉  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70 2]

# 结尾 #

这篇文章更多是对vue在使用localStorage的时候需要修改的地方，和如何修改通过一个小例子做展示。可以通过这种方式，对之前一些事情做一下回顾。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70]: /images/20221120/4a1e426658f0480082ad2d0582d29459.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70 1]: /images/20221120/c28826e19c0943079d64e7b0abef87c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201127210350544.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZhamluZ19mZWl5dWU=,size_16,color_FFFFFF,t_70