Cookie 干货

从前端开发看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"

 <html>

     <button onclick="setC()">设置Cookie</button>

     <button onclick="setCDate()">获取Cookie过期时间</button>

     <button onclick="getC()">获取Cookie</button>

     <button onclick="changeC()">更改Cookie</button>

     <button onclick="delC()">删除Cookie</button>

     <script>

         // 设置 Cookie

         function setC(){

             document.cookie = "name = tizi;"

         }

         // 例如设置 一个两天过期且 age = 20 的 cookie

         function setCDate(){

             var date = new Date()

             date.setTime(date.getTime() + 2*24*60*60*1000)

             document.cookie = "age = 20; expires = " + date.toUTCString()

         }

         // 获取 Cookie

         function getC(){

             console.log( document.cookie )

         }

         // 更改 Cookie

         function changeC(){

             document.cookie = "name = tiziChange;"

         }

         // 删除 Cookie, 要将 expires 设置成过去时间即可

         function delC(){

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

         }

     </script>

 </html>

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

巴特西

Cookie 干货

最新文章

热门文章