js-cookie

最新推荐文章于 2025-06-19 19:56:36 发布

sleepwalker_1992

最新推荐文章于 2025-06-19 19:56:36 发布

阅读量543

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript Vue 文章标签： js-cookie

本文链接：https://blog.youkuaiyun.com/sleepwalker_1992/article/details/86100967

JavaScript 同时被 2 个专栏收录

57 篇文章

订阅专栏

Vue

37 篇文章

订阅专栏

博客介绍了js-cookie的安装与应用。安装方面，可通过npm install js-cookie命令完成。不过内容未详细阐述其具体应用场景和方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

npm install js-cookie

2、应用

<template>
  <div>
    <button @click="setCookie">创建cookie</button>
    <button @click="getCookie">读取cookie</button>
    <button @click="deleteCookie">删除cookie</button>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
export default {
  name: 'HelloWorld',
  data () {
    return {};
  },
  methods: {
    setCookie: function () {
      // 创建cookie
      // Cookies.set('name', 'value');
      Cookies.set('username', 'sleepwalker');

      // 创建cookie并设置有效期,有效期为7天
      // Cookies.set('name', 'value', { expires: 7 });
      Cookies.set('password', '123', { expires: 7 });

      // 创建cookie并设置有效期,有效期为 60 * 1000 毫秒
      var expirydate = new Date();
      expirydate.setTime(expirydate.getTime() + 60 * 1000);
      Cookies.set('pass', '123', { expires: expirydate });
    },

    getCookie: function () {
      // 读取cookie
      // Cookies.get('name');
      var username = Cookies.get('username');
      var password = Cookies.get('password');
      console.log(username);
      console.log(password);

      //  Cookies.get(); 获取所有cookie，得到的是一个对象
      var cookieData = Cookies.get();
      console.log(cookieData);
      console.log(cookieData.username);
    },

    deleteCookie: function () {
      // 删除 cookie
      // Cookies.remove('name');
      Cookies.remove('username');
      Cookies.remove('password');
    }
  }
};
</script>

<style scoped>

</style>