cookie到底是什么？

从应用层面:cookie是一段字符串；
从js层面：cookie是document对象下的一个字符串属性；

网页中查看cookie

在console控制台输入document.cookie回车就可以查看存储的cookie

image.png

cookie的3个关键点

键（key）值(value) date(保存的时间)

设置和获取cookie

注意：一般本地浏览器中直接打开是不行的，必须起一个服务，这里是node服务：

const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(98,()=>{
    console.log('ok98')
})

原生方式：
设置一个cookie过期为30天

//点击设置：
        $("#setBut").on("click",function(){
           var date = new Date().getTime()  //先转化为毫秒数
           var newD = new Date(date + 30 * 24 * 60 * 60 *1000)
           document.cookie = "xm=李慷; expires=" + newD.toUTCString()
        })
//点击获取：
        $("#getBut").on("click",function(){
          var keys = document.cookie
          console.log(keys)   //获取到再操作字符串
        })

jquery方法

      //<script src="jquery-3.2.1.min.js"></script>
     // <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    $(function(){
        //点击设置：
        $("#setBut").on("click",function(){
            $.cookie('the_cookie', 'the_value', { expires: 1, path: '/' })  
        })
        //点击获取：
        $("#getBut").on("click",function(){
          var name =   $.cookie('the_cookie');
          console.log(name)
        })
        //删除cookie
        $("#movBut").on("click",function(){
        $.cookie('the_cookie', null);   //通过传递null作为cookie的值即可
        })
    })

jquery应用（设置过期时间为30秒）

  $(function () {
        //点击设置：
        $("#setBut").on("click", function () {
            var date = new Date();
            date.setTime(date.getTime() + (30 * 1000));//这里设置过期时间为30秒
           // $.cookie('username', username, { expires: date });
            $.cookie('the_cookie', 'the_value', { expires: date, path: '/' });

        })
        //点击获取：
        $("#getBut").on("click", function () {
            var name = $.cookie('the_cookie');
            console.log(name)
        })
        //删除cookie
        $("#movBut").on("click", function () {
            $.cookie('the_cookie', null);   //通过传递null作为cookie的值即可
        })
    })

vue使用
下载：

 cnpm install vue-cookies --save-dev

main.js引入

import VueCookies from 'vue-cookies'    //设置cookie引入
Vue.use(VueCookies)

项目使用：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <van-button type="primary" @click="setcookie()">设置按钮</van-button>
    <van-button type="primary" @click="getcookie()">获取按钮</van-button>
    <van-button type="primary" @click="iscookie()">验证按钮</van-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    } 
  },
   methods:{
      //设置cookie
      setcookie(){
        var value = "dssalsd"
        this.$cookies.set('lk',value, '60s')   //保存60s cookie
      },
      //获取cookie
      getcookie(){
      var lk = this.$cookies.get('lk')  
      console.log(lk)
      },
      iscookie()
      {
       var path =  this.$cookies.keys()
       console.log(path)
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

效果：