精华内容
下载资源
问答
  • localStorage.getItem(key):获取指定key本地存储的值 localStorage.setItem(key,value):将value存储key字段 详细地址:客户端存储 — Vue.js

    localStorage.getItem(key):获取指定key本地存储的值
    localStorage.setItem(key,value):将value存储到key字段

    详细地址:客户端存储 — Vue.js

    展开全文
  • 组件中调用vuex import {mapActions} from 'vuex' // methods内: saveSearch() { this.saveSearchHistory(this.query) }, ...mapActions([ 'saveSearchHistory' ]) 以上这篇vue中,在本地缓存中读写数据的方法就是小...

    1.安装good-storage插件

    cnpm i good-storage --save

    2.读/写的方法

    common/js/cache.js:

    import storage from 'good-storage'

    const SEARCH_KEY = '__search__'

    const SEARCH_MAX_LENGTH = 15

    // compare:findindex传入的是function,所以不能直接传val

    function insertArray(arr, val, compare, maxLen) {

    const index = arr.findIndex(compare)

    if (index === 0) {

    return

    }

    if (index > 0) {

    arr.splice(index, 1)

    }

    arr.unshift(val) // 插入到数组最前

    if (maxLen && arr.length > maxLen) {

    arr.pop() // 删除末位元素

    }

    }

    // 存储搜索历史

    export function saveSearch(query) {

    let searches = storage.get(SEARCH_KEY, [])

    insertArray(searches, query, (item) => {

    return item === query

    }, SEARCH_MAX_LENGTH)

    storage.set(SEARCH_KEY, searches)

    return searches

    }

    // 加载本地缓存的搜索历史

    export function loadSearch() {

    return storage.get(SEARCH_KEY, [])

    }

    3.数据用vuex传递

    在store/actions.js中写入数据:

    import * as types from './mutation-types'

    import {saveSearch} from 'common/js/cache'

    export const saveSearchHistory = function({commit, state}, query) {

    commit(types.SET_SEARCH_HISTORY, saveSearch(query))

    }

    4.组件中调用vuex

    import {mapActions} from 'vuex'

    // methods内:

    saveSearch() {

    this.saveSearchHistory(this.query)

    },

    ...mapActions([

    'saveSearchHistory'

    ])

    以上这篇vue中,在本地缓存中读写数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    展开全文
  • vue点击按钮保存数据到本地

    千次阅读 2020-12-17 15:08:00
    ** // 定义一个点击下载事件 ** 完成后就可以吧列表导入的base64位数据流转化位表格的形式,并且下载导出。

    **

    // 定义一个点击下载事件

    **
    在这里插入图片描述

    完成后就可以吧列表导入的base64位数据流转化位表格的形式,并且下载导出。

    展开全文
  • 数据存本地js方法文件 const local = {} /** * put 把数据到本地存储 * @param {*} key * @param {*} value */ local.set = function (key, value) { window.localStorage.setItem(key, JSON.stringify(value...

    数据存本地js方法文件

    const local =  {}
    /**
     * put 把数据放到本地存储
     * @param {*} key
     * @param {*} value
     */
    local.set = function (key, value) {
      window.localStorage.setItem(key, JSON.stringify(value));
    };
    /**
     * get 获取本地存储数据
     * @param {*} key
     */
    local.get = function (key) {
      var obj = window.localStorage.getItem(key);
      if (obj && obj != 'undefined' && obj != 'null') {
        return JSON.parse(obj);
      }
      return '';
    };
    /**
     * remove 清除本地数据
     * @param {*} key
     */
    local.remove = function (key) {
      if (key) {
        window.localStorage.removeItem(key);
      } else {
        for (var i in arguments) {
          window.localStorage.removeItem(arguments[i]);
        }
      }
    };
    /**
     * seek 检查本地是否有值
     * @param {*} key
     */
     local.seek = function (name) {
       if (!name) return;
       return window.localStorage.hasOwnProperty(name)
     }
    
    export default local
    

    我以Vue项目为参考做事例,若其他文件需要引用,则在其它页面按需引入即可。

    import local from "../../libs/local";  //依据自己页面实际路径为准
    

    接下来展示如何使用

    //数据存储本地
    local.set("areaDatas", data); //其中"areaDatas"为key,data为value
    //数据从本地取出
    local.get("areaDatas");
    //数据从本地清除
    local.remove('areaDatas');
    

    接下来为大家展示一个我所遇到的坑,当你想存一个ES6中的map去本地的话,计算机并不会如你所愿,你按照刚刚的做法得到的value将会是undefined

    click_areaCodeList() {
          let param = {
            getAll: 1
          };
          areaCodeList(param)
            .then(resp => {
              if (resp.data) {
                let data = resp.data.data;
                let map = new Map();
                for (let i = 0; i < data.length; i++) {
                  let key = map.get(data[i].code);
                  if (key == undefined) {
                    let arr = [];
                    arr.push(data[i].province, data[i].city, data[i].district);
                    map.set(data[i].code, arr);
                  } else {
                    key.push(data[i].code);
                    map.set(data[i].code, key);
                  }
                }
                local.set(
                  "xzqbmChangeList",
                  JSON.stringify(Array.from(map.entries()))  //你得这样才能存进去
                );
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
    

    接下来就是取了,也有一点变化

    this.xzqbmChangeList = new Map(JSON.parse(local.get("xzqbmChangeList")));
    

    既然说到了Map,就为大家简单过一下map的添加键和读取值吧

    ES6之Map小解

    var myMap = new Map();
     
    var keyObj = {},
        keyFunc = function () {},
        keyString = "hzq";
     
    // 添加键
    myMap.set(keyString, "和键'hzq'关联的值");
    myMap.set(keyObj, "和键keyObj关联的值");
    myMap.set(keyFunc, "和键keyFunc关联的值");
     
    myMap.size; 
     
    // 读取值
    myMap.get(keyString);    // "和键'hzq'关联的值"
    myMap.get(keyObj);       // "和键keyObj关联的值"
    myMap.get(keyFunc);      // "和键keyFunc关联的值"
     
    myMap.get("hzq");        // "和键'hzq'关联的值"
                             // 因为keyString === 'hzq'
    myMap.get({});           // undefined, 因为keyObj !== {}
    myMap.get(function() {}) // undefined, 因为keyFunc !== function () {}
    

    最后说个小知识,如果你在不同页面向本地存储数据时,想存在一个对象里,你可以如下操作,

    //先从本地获取原有数据,如:
    _this.adressDatas = local.get('adressDataInfo');
    //然后在需要的地方定义一个新对象,如:var obj = {}  
    var obj = {..._this.adressDatas,...{
        bussAdress:_this.bussAdressAll.bussAdress,//企业地址
        bussAdressId:_this.bussAdressAll.bussAdressId,//企业地址id
        detailed:_this.bussAdressAll.detailed,//详细地址
       	userName:_this.bussAdressAll.userName,  //联系人姓名
        contactPhone:_this.bussAdressAll.contactPhone, //联系电话
        userEmail:_this.bussAdressAll.userEmail  //联系人邮箱
        }}
        // 写好后在把它存入本地,
        local.set('adressDataInfo',obj)
        //这样的话,本地中的数据都保存在这个adressDataInfo键值value下。
    

    本文章为原创,若转载请注明出处,喜欢的朋友请给个关注,谢谢

    展开全文
  • 今天小编就为大家分享一篇vue中,在本地缓存中读写数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题...2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一
  • vue数据本地储存

    千次阅读 2021-02-03 15:28:21
    就这一个页面+连数据我都写了能有一周了,可累死老娘了,啊啊啊啊 ...1.要实现的就是点击新增提交之后,数据上传数据库,后台返回数据本地储存,显示在页面 2.填写表单之后,点击新增返回主页面填写的表单 ...
  • 可以再多个页面都会用到,但是存储到本地的加密点,权限等信息可能涉及用户权限相关的,如果我们想根据这些信息去判断该给用户展示哪些内容的时候,无法实时的获取,可以采用vue监听本地数据的方式 ...
  • vue本地数据 取 删 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件
  • vue获取本地json数据

    千次阅读 2020-05-08 09:28:09
    vue获取本地json数据 最近练习vue的时候,因为是通过vue-cli4搭建的项目,和vue-cli2搭建项目的目录结构不一样。静态文件的放置位置在public文件里。 为了降低模块间的耦合度和方便管理,所以我把axios获取数据给...
  • 什么是localStorage在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M...
  • //得到图片的base64编码数据 var a = document.createElement("a"); // 生成一个a元素 var event = new MouseEvent("click"); // 创建一个单击事件 a.download = name || "photo"; // 设置图片名称 a.href = ...
  • 1,微信不能用localStorage来本地存数据,所以使用cookie来存数据 2,vue-cookies框架对vue很友好,可以单独使用 3,安装,使用vue-cookies: npm install vue-cookies --save var Vue = require('vue') Vue.use...
  • 2.在要跟行的数据中例如heade.vue中 class = " site-nav-sign " v- if = " items.name " > " /login " > "" >{{items.name}}</a></router-link> " /register " > "" >消息</a></router-link> class = ...
  • 1、mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了 2、mock的数据通过module.exports、export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,导致文件大、首屏渲染...
  • 需求:两个页面 第一个页面:一个input框 ... 想了很久很久,最终是大佬给我...'positionMap’表示的是一个自己给数据取的名字,逗号后面这个就是我需要传递的数据 这是第二个页面 //这是地图确定的按钮 determineClick
  • vue中实时监听本地存储 在main.js中 Vue.prototype.$addStorageEvent = function (type, key, data) { if (type === 1) { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('...
  • 1、dom结构说明: 【评论人、评论内容、发表评论... 发表评论的数据存到localStorage 中,关于localStorage ,说明几点: a. localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的; b....
  • vue本地缓存localStorage将多次添加的表单数据存为数组格式 要把表单数据存成数组形式,在另一个页面通过v-for渲染展示,因为拥有同一个key值,在每次更新表单数据时都会发生数据覆盖现象。 var templist = JSON....
  • <script src="js/jquery.js">script> <link rel="stylesheet" href="css/bootstrap.min.css"/> <script src="./lib/vue.js">script> <style> .course{ width: 1200px; margin: 50px auto; border: 1px solid #ccc; ...
  • When talking about storing data, there are ... 在谈论存储数据时,有多种保留数据的方法。 One is very simple, it’s perfect for prototypes, and it’s storing the data using the Web Storage API: l...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,877
精华内容 2,350
关键字:

vue存数据到本地

vue 订阅