vue 中直接操作 cookie 及如何使用工具 js-cookie

╰半夏微凉° 2021-12-20 00:15 248阅读 0赞

vue 中直接操作 cookie

以下3种操作方式

export default {
        set:function(name,value,days){
            var d = new Date;
            d.setTime(d.getTime() + 24*60*60*1000*days);
           // d.setDate(d.getDate+days);
            window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString()
        },
        get:function(name){
    
            var v = window.document.cookie.match('(^|;)?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
        },
        remove:function(name){
            this.set(name, '', -1);
        }
    }

使用 js-cookie 工具：（比较方便，推荐使用）

1.安装

cnpm i js-cookie

2.引入

import Cookies from 'js-cookie'

3.使用

![20190701101818852.gif][]

4.使用详情：

Create a cookie, valid across the entire site:
    Cookies.set('name', 'value');
    
    Create a cookie that expires 7 days from now, valid across the entire site:
    Cookies.set('name', 'value', { expires: 7 });
    
    Create an expiring cookie, valid to the path of the current page:
    Cookies.set('name', 'value', { expires: 7, path: '' });
    
    Read cookie:
    Cookies.get('name'); // => 'value'
    Cookies.get('nothing'); // => undefined
    
    Read all visible cookies:
    Cookies.get(); // => { name: 'value' }
    
    Delete cookie:
    Cookies.remove('name');
    
    Delete a cookie valid to the path of the current page:
    Cookies.set('name', 'value', { path: '' });
    Cookies.remove('name'); // fail!
    Cookies.remove('name', { path: '' }); // removed!
    
    IMPORTANT! when deleting a cookie, you must pass the exact same path and domain attributes that was used to set the cookie, unless you're relying on the default attributes.
    
    Note: Removing unexisting cookie does not raise any exception nor return any value

[20190701101818852.gif]: /images/20211219/965c805ec5eb485794d9b492078f9f7d.png