Cookie-js的基本使用:

什么是cookie?为什么需要cookie

  • cookie的中文翻译是饼干的意思, 所谓cookie其实就是一些数据的信息,是一种保存在客户端(我们的电脑)的纯文本文件,当我们使用自己的电脑通过浏览器进行网页的访问的时候,服务器就会生成一个证书返回给我们的浏览器并写入我们的本地电脑,这个证书就是cookie
  • cookie最常用在记录用户的登录信息当中,假设我们正在浏览一个网站,网站的信息需要我们登录了才能观看,但我们进行了登陆操作后,浏览器会把我们填写的用户名和密码按照固定的格式发送给服务器,待服务器验证无误后,就会把我们请求的内容返回给我们的浏览器,这时我们就能查看到刚刚请求的页面了,但是要知道http协议是无状态协议,换而言之就是服务器并不会记录我们的登陆状态,因此当我们请求同一个网站的另一个页面时, 服务器会要求我们重新登陆, 这时你就会很崩溃,因为你在同一个网站点击一下, 浏览器就会叫你重新登陆!!! 但是现实生活中,这种情况并不会发生, 通常我们在同一个网站登录一次过后, 很长一段时间都不需要再次登录, 这就要归功于cookie了!
  • cookie出现后,浏览器就有了记忆, 浏览器在收到服务器返回的页面时, 也会得到一个cookie,其中存放着我们的专属id也就是后面的tooken,浏览器会保存这个cookie,并且每一次请求同一个网站时,请求中都会附带这个记录着我们信息的cookie,这样服务器在收到请求后,可以通过cookie中的id,来辨别我们是谁,获取到我们的登陆状态! 不仅如此,cookie还能记录各种各样的信息, 例如我们使用的语言, 购物车中的商品 , 点击过的链接等…. 具体会记录哪些信息取决于网站本身。

js-cookie是什么？

  • js-cookie是一个简单的,轻量级的处理cookies的js API，用来处理cookie相关的插件
  • js-cookie官网

js-cookie的使用方法:

  1. 首先安装js-cookie
    npm install --save js-cookie
  2. 引入
    import Cookies from 'js-cookie'
  3. js-cookie的添加 获取 删除
    • 添加cookie
      // 创建一个名称为name，对应值为value的cookie，由于没有设置失效时间，默认失效时间为该网站关闭时
      Cookies.set(name, value)

      // 创建一个有效时间为7天的cookie
      Cookies.set(name, value, { expires: 7 })

      // 创建一个带有路径的cookie
      Cookies.set(name, value, { path: '' })

      // 创建一个value为对象的cookie
      const obj = { name: 'ryan' }
      Cookies.set('user', obj)
    • 获取cookie
      // 获取指定名称的cookie
      Cookies.get(name) // value

      // 获取value为对象的cookie
      const obj = { name: 'ryan' }
      Cookies.set('user', obj)
      JSON.parse(Cookies.get('user'))

      // 获取所有cookie
      Cookies.get()
    • 删除cookie
      // 删除指定名称的cookie
      Cookies.remove(name) // value

      // 删除带有路径的cookie
      Cookies.set(name, value, { path: '' })
      Cookies.remove(name, { path: '' })