文章目錄

• • 1 介紹
  • 2 utils
  • 3 Test.vue

1 介紹

在vue中通常使用axios進項http請求，但是axios不帶cookie，這里可自己獲取cookie，放到參數中進行登錄驗證等，方法不唯一。

2 utils

cookie.js

/*** 讀取cookie，* 需要注意的是cookie是不能存中文的，如果需要存中文，解決方法是后端先進行編碼encode()，* 前端取出來之后用decodeURI('string')解碼。（安卓可以取中文cookie，IOS不行）* */ export const b_getCookie = (c_name) => {var name = c_name + "=";var ca = document.cookie.split(';');for (var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') c = c.substring(1);if (c.indexOf(name) != -1) {return c.substring(name.length, c.length);}}return ""; }/*** 設置cookie* c_name: cookie的名字，* value : cookie值，* expiredays: 過期時間（天數）* */ export const b_setCookie = (c_name, value, expiredays) => {var exdate = new Date();exdate.setDate(exdate.getDate() + expiredays);document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); }/*** 刪除cookie* c_name: cookie的名字，* */ export const b_delCookie = (c_name) => {var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = getCookie(c_name);if (cval != null)document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString(); }

3 Test.vue

<template><div><el-row><el-input v-model="input" placeholder="請輸入內容"></el-input><el-button @click="getCookie">獲取cookie</el-button><el-button @click="setCookie">設置cookie</el-button></el-row></div> </template> <script>import {b_getCookie, b_setCookie} from "../utils/cookie";export default {name: "Test",data() {return {input: ''}},methods: {getCookie() {console.log("==========獲取cookie===========")let username = b_getCookie("username")let password = b_getCookie("password")console.log(username);console.log(password);},setCookie() {console.log("設置cookie");b_setCookie("c_key", "c_value", 30)}}} </script><style scoped></style>

總結

以上是生活随笔為你收集整理的Vue项目实操cookie相关操作封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。