码迷,mamicode.com
首页 > 其他好文 > 详细

Cookie 干货

时间:2019-08-14 12:27:47      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:浏览器   开发   不能   注意   style   date   utc   存储机制   color   

从前端开发看Cookie

Cookie是浏览器端的存储机制

存在意义:

  为了解决“如何记住用户信息”而发明的:

    当用户访问网页时,他的名字可以存储在cookie中

    下次用户访问该页面时,cookie会“记住”他的名字

特点:

  会话Cookie:即不设置过期时间,此时只要关闭浏览器Cookie就会消失,注意是关闭浏览器而不是关闭一个标签

  持久Cookie:即设置了过期时间(expires),此时关闭浏览器,如果没有超过设置的过期时间则Cookie还会存在,直到过期

  谷歌浏览器不能设置本地文件Cookie,IE、火狐都可以

  只要浏览器关闭Cookie功能,所有Cookie功能都不会实现

设置Cookie:

  document.cookie = "name = tizi"

  其中可以添加上 path,不设置则默认当前页,及在上级页面不可以获取到Cookie,但是在下级页面可以(做了几个实验,不知道是不是绝对的):

  如在file:///D:/MySite/test.html 下设置了Cookie,在 file:///D:/MySite/src/test.html 下也可以获取,反之就不可以了

  但是,如果设置了 path = / ,上面的反过来就可以了:

  如在file:///D:/MySite/test.html 下设置了Cookie,在 file:///D:/MySite/src/test.html 下也可以获取,反之也可以了

获取Cookie:

  console.log(document.cookie)

更改Cookie:

  document.cookie = "name = tiziChange"

删除Cookie:

  document.cookie = "name = ; expires = Thu, 01 Jan 1970 00:00:00 UTC"

 1 <html>
 2     <button onclick="setC()">设置Cookie</button>
 3     <button onclick="setCDate()">获取Cookie过期时间</button>
 4     <button onclick="getC()">获取Cookie</button>
 5     <button onclick="changeC()">更改Cookie</button>
 6     <button onclick="delC()">删除Cookie</button>
 7     <script>
 8         // 设置 Cookie
 9         function setC(){
10             document.cookie = "name = tizi;"
11         }
12         // 例如设置 一个两天过期且 age = 20 的 cookie 
13         function setCDate(){
14             var date = new Date()
15             date.setTime(date.getTime() + 2*24*60*60*1000)
16             document.cookie = "age = 20; expires = " + date.toUTCString()
17         }
18         // 获取 Cookie
19         function getC(){
20             console.log( document.cookie )
21         }
22         // 更改 Cookie
23         function changeC(){
24             document.cookie = "name = tiziChange;"
25         }
26         // 删除 Cookie, 要将 expires 设置成过去时间即可
27         function delC(){
28             document.cookie = "name = ; expires = Thu, 01 Jan 1970 00:00:00 UTC"
29         }
30     </script>
31 </html>

其实我参考的就是W3School,为了方便自己记忆,就写了一下,嘎嘎~

      

 

Cookie 干货

标签:浏览器   开发   不能   注意   style   date   utc   存储机制   color   

原文地址:https://www.cnblogs.com/tizi/p/11350888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!