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

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

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

<template>
  <div>
    <button @click="writeToCookie">写入Cookie</button>
    <button @click="readFromCookie">读取Cookie</button>
  </div>
</template>

<script>
export default {
  methods: {
    // 将变量参数写入cookie
    writeToCookie() {
      // 定义要写入的变量参数
      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);

      // 写入cookie
      document.cookie = `params=${jsonParams};expires=${expires.toUTCString()}`;

      console.log('已写入Cookie');
    },
    // 从cookie中读取变量参数
    readFromCookie() {
      // 获取cookie
      const cookie = document.cookie;

      // 将cookie字符串分割成数组
      const cookieArray = cookie.split(';');

      // 遍历cookie数组，找到目标cookie
      let 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'
      };

      // 使用封装的函数写入cookie
      CookieUtils.writeToCookie('params', params, 1); // 第三个参数为cookie的过期时间（单位：天）

      console.log('已写入Cookie示例');
    },
    // 从cookie中读取变量参数的示例
    readFromCookieExample() {
      // 使用封装的函数读取cookie
      const 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'
      };

      // 使用封装的函数写入cookie
      CookieUtils.writeToCookie('params', params, 1); // 第三个参数为cookie的过期时间（单位：天）

      console.log('已写入Cookie示例');
    },
    // 从cookie中读取变量参数的示例
    readFromCookieExample() {
      // 使用封装的函数读取cookie
      const params = CookieUtils.readFromCookie('params');

      console.log('从Cookie中读取的变量参数示例：', params);
    }
  }
};
</script>

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