vue+js  实现将变量参数写至cookie中，并进行读取，可以一次性写入多个值

【使用Vue和JavaScript将变量参数写入cookie并进行读取的示例代码】

<template><div><button @click="writeToCookie">写入Cookie</button><button @click="readFromCookie">读取Cookie</button></div>
</template><script>
export default {methods: {// 将变量参数写入cookiewriteToCookie() {// 定义要写入的变量参数const params = {name: 'John',age: 25,city: 'Shanghai'};// 将变量参数转为JSON字符串const jsonParams = JSON.stringify(params);// 设置cookie的过期时间（1天）const expires = new Date();expires.setDate(expires.getDate() + 1);// 写入cookiedocument.cookie = `params=${jsonParams};expires=${expires.toUTCString()}`;console.log('已写入Cookie');},// 从cookie中读取变量参数readFromCookie() {// 获取cookieconst cookie = document.cookie;// 将cookie字符串分割成数组const cookieArray = cookie.split(';');// 遍历cookie数组，找到目标cookielet params = {};for (let i = 0; i < cookieArray.length; i++) {const cookieItem = cookieArray[i].trim().split('=');if (cookieItem[0] === 'params') {params = JSON.parse(cookieItem[1]);break;}}console.log('从Cookie中读取的变量参数：', params);}}
};
</script>
```使用示例：```html
<template><div><button @click="writeToCookieExample">写入Cookie示例</button><button @click="readFromCookieExample">读取Cookie示例</button></div>
</template><script>
import CookieUtils from './CookieUtils'; // 假设CookieUtils是封装了写入和读取cookie的工具函数export default {methods: {// 将变量参数写入cookie的示例writeToCookieExample() {const params = {name: 'John',age: 25,city: 'Shanghai'};// 使用封装的函数写入cookieCookieUtils.writeToCookie('params', params, 1); // 第三个参数为cookie的过期时间（单位：天）console.log('已写入Cookie示例');},// 从cookie中读取变量参数的示例readFromCookieExample() {// 使用封装的函数读取cookieconst params = CookieUtils.readFromCookie('params');console.log('从Cookie中读取的变量参数示例：', params);}}
};
</script>

上述示例将变量参数存储在名为`params`的cookie中，通过调用`writeToCookie`函数写入cookie，并通过调用`readFromCookie`函数从cookie中读取变量参数。在示例中，参数写入和读取的过程已经封装成了可复用的函数，并添加了中文注释。实际使用时，可以根据需要修改参数和函数的名称。

【使用示例】

<template><div><button @click="writeToCookieExample">写入Cookie示例</button><button @click="readFromCookieExample">读取Cookie示例</button></div>
</template><script>
import CookieUtils from './CookieUtils'; // 假设CookieUtils是封装了写入和读取cookie的工具函数export default {methods: {// 将变量参数写入cookie的示例writeToCookieExample() {const params = {name: 'John',age: 25,city: 'Shanghai'};// 使用封装的函数写入cookieCookieUtils.writeToCookie('params', params, 1); // 第三个参数为cookie的过期时间（单位：天）console.log('已写入Cookie示例');},// 从cookie中读取变量参数的示例readFromCookieExample() {// 使用封装的函数读取cookieconst params = CookieUtils.readFromCookie('params');console.log('从Cookie中读取的变量参数示例：', params);}}
};
</script>

上述示例将变量参数存储在名为params的cookie中，通过调用writeToCookie函数写入cookie，并通过调用readFromCookie函数从cookie中读取变量参数。在示例中，参数写入和读取的过程已经封装成了可复用的函数，并添加了中文注释。实际使用时，可以根据需要修改参数和函数的名称。