javascript 说一下 cookie 的用法以及几个小技巧

cookie 是 哈 ？

cookie:存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问者电脑上存储数据
	1、不同的浏览器存放的cookie位置不一样，也是不能通用的
	
	2、cookie的存储是以域名的方式进行区分的
	
	3、cookie的数据是可以设置名字的，j.name=Jack
	
	4、一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样
	
	5、每个cookie存放的内容大小也是限制的，不同的浏览器存放大小限制不一样

cookie：是 document的属性，也就是 window.document.cookie，
        用于存储小的数据，如：username、email、uid、token等，并且可以设置数据的过期时间

cookie：本质上其实就是个字符串

cookie是以“键值对”的形式保存的，即key=value的格式，各个cookie之间一般是以“;”分隔

通过document.cookie获取当前网站下的cookie，得到的是字符串的形式的值，它包含了
当前网站下的所有cookie，它会把所有cookie通过一个分号+空格的形式串联起来
    

给 cookie 设置过期时间

长时间存放一个cookie，需要在设置这个cookie的时候，必须设置一个过期时间，

固定格式：document.cookie = '名称=值;expires='+(字符串格式的)时间

cookie默认是临时存储，当浏览器关闭进程的时候，自动销毁

据 举 例 子 哈

// 1、添加cookie
  document.cookie = "name=White"
  document.cookie = "age=12"
  document.cookie = "heigth=1.80"

  // 2、获取所有的cookie，得到的是一个字符串，格式为：cookie1=value; cookie2=value; cookie3=value;
  let cookieStr1 = document.cookie
  console.log(cookieStr1) // age=12; heigth=1.80; name=White

  // 3、修改cookie，修改cookie类似于创建cookie
  document.cookie = "name=Black"
  let cookieStr2 = document.cookie
  console.log(cookieStr2) // age=12; heigth=1.80; name=Black

  // 4、删除cookie，只要将expires参数设置为以前的时间即可，如下所示，设置为（Thu, 01 Jan 1970 00:00:00 GMT）
  // 注意，删除时不必指定 cookie 的值
  document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT"
  let cookieStr3 = document.cookie
  console.log(cookieStr3) // age=12; heigth=1.80

--------------------------------------------------------------------------------------------------

  /**
   * document.cookie，看起来像一个普通的文本字符串，其实它不是
     即使你在document.cookie中写入一个完整的cookie字符串，当你重新读取该cookie信息时，cookie信息是以名/值对的形式展示的
     如果你设置了新的cookie，旧的cookie不会被覆盖。新cookie也会被添加到document.cookie中
  */
  document.cookie = "阿拉斯加的骆驼" // 这种在Cookie中存储的格式为：Name处是个空，Value处是“阿拉斯加的骆驼”
  let cookieStr4 = document.cookie
  console.log(cookieStr4) // age=12; heigth=1.80; 阿拉斯加的骆驼

--------------------------------------------------------------------------------------------------

  // 6、查找某个指定的cookie值，只能写一个js方法查找，如下
  function getCookie(cname) {
    let name = cname + "="
    let allCookie = document.cookie.split(';')
    for (let i = 0; i < allCookie.length; i++) {
      let c = allCookie[i].trim()
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length)
      }
    }
    return ""
  }
  console.log('查找age=', getCookie('age')) // 查找age= 1.80

--------------------------------------------------------------------------------------------------

  // 7、添加cookie的函数
  function setCookie(cname, cvalue, exdays) {
    let d = new Date()
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000))
    let expires = "expires=" + d.toGMTString() // 过期时间
    document.cookie = cname + "=" + cvalue + "; " + expires
  }

--------------------------------------------------------------------------------------------------

  /**
   * 检测cookie值的函数：
      如果设置了cookie，就显示一个问候信息，
      如果没有设置cookie，就显示一个弹窗用于询问访问者的名字，并调用 setCookie()方法，将访问者的名字存储365天
  */
  function checkCookie() {
    let userName = getCookie('userName')
    if (userName != "") {
      alert("螃蟹在剥我的壳，笔记本在写我，漫天的我落在枫叶上雪花上，而你在想我")
    } else {
      userName = prompt("please enter your userName", "")
      if (userName != "" && userName != null) {
        setCookie("userName", userName, 365)
      }
    }
  }
  checkCookie()


  // debugger // 下面这句代码就是删除 userName这一条cookie
  document.cookie = "userName=;expires=Thu, 01 Jan 1970 00:00:00 GMT"