在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:.......

好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑!

开发环境: webpack+vue+java后台

要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下:

先把这几个方法写上,删除的看需求决定需不需要:

//设置cookie
    setCookie(projectId,exdays) {
      var exdate=new Date();//获取时间
      exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天数
      //字符串拼接cookie
      window.document.cookie="projectId"+ "=" +projectId+";expires="+exdate.toGMTString();
    },
    //读取cookie
    getCookie:function () {
    console.log(document.cookie);
    let me=this;
    if (document.cookie.length>0) {
      var arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
      for(var i=0;i<arr.length;i++){
      var arr2=arr[i].split('=');//再次切割
      //判断查找相对应的值
      if(arr2[0]=='projectId'){
        me.workhourData.projectId=arr2[1];//保存到保存数据的地方
      }
      }
    }
    },
    //清除cookie
    clearCookie:function () {
    this.setCookie("","",-1);//修改2值都为空,天数为负1天就好了
    },

我这里是只需要一个projectId即可,实际中可以根据具体需求设置,

注意,这里有个坑,那就是中文,如果你需要存储中文cookie,而不进行任何处理的话,那么后台是会报错的,

java.lang.IllegalArgumentException: Control character in cookie value or attribute

这个错误一般是中文编码引起的,中文采用的是Unicode编码,而英文采用的是ASCII编码,当Cookie保存中文的时候需要对中文进行编码,而且从Cookie中取出内容的时候也要进行解码,所以必须特殊处理

escape(value) 编码

cookievalue=unescape(value); 解码

百度有恨多中方法,这里不多说!

然后就是在页面每一次加载的时候去调用this.getCookie()方法就可以了,

还要记住一点是,保存的时候也要设置cookie,这样才会生效,还有就是时间问题了,根据具体需求传参即可!

最后需要说的时,如果一旦报错或者不想要cookie了,可以手动清楚浏览器cookie!,这是最快的方式:

补充知识:vue 前后端分离调用后端数据(加深记忆)

1、在.vue文件中引入调用对应后台数据方法,并调用此方法

import {getAccount} from '../assets/js/index'

2、前端申请后台数据(安装axios依赖)

//上方引入的index.js
import axios from 'axios'
import {baseUrl} from "./config";
import $ from 'jquery'
import './base'

export const getAccount=()=>{
  return axios.post(`${baseUrl}/index/index/index`).then(res=>{
    return res.data;
  })
}

//config.js
export const baseUrl='http://shagua.com';
//base.js
import axios from 'axios';
import qs from 'qs';
import router from '../../router'

axios.defaults.withCredentials=true; //允许跨域发送cookie
axios.defaults.transformRequest = [function(data) { //解析post数据
 if(typeof data=='object'){
 return qs.stringify(data);
 }else{
 return data;
 }

}];

axios.defaults.transformResponse=[function(data){ //拦截response请求,做统一跳转
 data=JSON.parse(data);
 if(data.status=='-99'){
 router.push({path:'/login'});
 }
 return data;
}];

3、后端接收前端申请并返回数据(此处使用tp5,这里是允许访问,后台业务去对应调用的方法里写)

//跨域访问的时候才会存在此字段
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

$allow_origin = array(
  'http://localhost:8080',
);

if(in_array($origin, $allow_origin)){
  header('Access-Control-Allow-Credentials: true');
  header("Access-Control-Allow-Headers: *");
  header('Access-Control-Allow-Origin:'.$origin);
  header('Access-Control-Max-Age:3600');
}

以上这篇在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 在Vue中如何使用Cookie操作实例

    大家好,由于公司忙着赶项目,导致有段时间没有发布新文章了.今天我想跟大家谈谈Cookie的使用.同样,这个Cookie的使用方法是我从公司的项目中抽出来的,为了能让大家看懂,我会尽量写详细点.废话少说,我们直接进入正题. 一.安装Cookie 在Vue2.0下,这个貌似已经不需要安装了.因为当你创建一个项目的时候,npm install 已经为我们安装好了.我的安装方式如下: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpa

  • Vue页面刷新记住页面状态的实现

    环境 vue项目,页面有搜索.筛选项等. 需求 页面跳转,切换或者刷新,希望可以记住用户在页面的筛选状态 方案v1 vue有提供一种缓存组件的解决方案 - keep-alive. 缓存不活动的组件实例,而不是销毁它们. <keep-alive> <router-view v-if="$route.meta.keepAlive" class="app-middle-content"/> </keep-alive> <route

  • 详解vue中localStorage的使用方法

    什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 2.localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后

  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑! 开发环境: webpack+vue+java后台 要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下: 先把这几个方法写上,删除的看需求决定需不需要:

  • java web中使用cookie记住用户的账号和密码

    毕业设计中需要用到记住账号密码的功能,网上搜到了一个解决方案,自己稍加改造就是下面的方法. 首先是登录的页面,当用户勾选记住密码,传递给controller(我用的SSM框架),后台设置cookie的值,然后下次登录的时候就不用再次输入账号和密码了. login.jsp的代码: <%@page import="org.apache.commons.lang.StringUtils"%> <%@ page language="java" conten

  • JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • php使用cookie显示用户上次访问网站日期的方法

    本文实例讲述了php使用cookie显示用户上次访问网站日期的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?php if(!empty($_COOKIE['lastvisit'])){//先判断,是否存在cookie  echo "您上次访问时间是:".$_COOKIE['lastvisit'];  setCookie("lastvisit",date("Y-m-d H:i:s"),time()+3600*24*

  • Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用.首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-router+Vuex的全家桶. select首先要区分单选和多选,v-model在select单选和多选上有区别.     select单选实例: <select v-model="fruit"> <option selected valu

  • vue 通过下拉框组件学习vue中的父子通讯

    如果说vue组件化开发中第一步应该了解的是什么的话,那无疑是父子组件之间是如何实现通讯的(说白了就是父子组件中数据是如何传递的),只有理解了这一步,才能更好的开发组件 这里先提出两个关键词: props 与 emit : 写这个组件之前,先看看效果图: 组件开发分析: 既然是组件: 首先组件内部数据内容肯定是可变的(如上图中的"按时间排序"之类的),这必须由父组件传入(即父组件如何将数据传个父组件); 在选择了内容之后,如何将数据传出来(即子组件如何将数据传给父组件) 先写结构: 父组

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • 基于vue.js中关于下拉框的值默认及绑定问题

    一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • vue table表格中如何控制下拉框的显示隐藏

    目录 vue table表格控制下拉框的显示隐藏 vue下拉框清空 总结 vue table表格控制下拉框的显示隐藏 需求:点击表格的某一个列的吗某个值,显示那值得下拉框,失去焦点时则隐藏 平时 点击 失去焦点后变化平时的显示 <vxe-table-column align="center" title="类型" width="270" style="height:40px;" field="collectio

随机推荐