从前端开发看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 干货的更多相关文章

  1. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

  2. Cookie的简单用法

    ASP.NET初学者使用cookie的时候会感觉很陌生,在学习的过程中掌握cookie对象的增删改查非常有必要,,下面是我学习的时候经常用到的这些方法 写入和读取Cookie都需要用户Respone对 ...

  3. （2018干货系列一）最新Java学习路线整合

    怎么学Java Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征. 话不多说,直接上干货: ...

  4. （2018干货系列三）最新PHP学习路线整合

    怎么学PHP PHP是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域. 菜鸟到大神,一步到位,正式开启干货模式: PHP初级开发工程师 ...

  5. Retrofit2.0 ，OkHttp3完美同步持久Cookie实现免登录(二)

    原文出自csdn: http://blog.csdn.net/sk719887916/article/details/51700659: 通过对Retrofit2.0的<Retrofit 2.0 ...

  6. （2018干货系列二）最新HTML5学习路线整合

    怎么学HTML5 HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,一方面提升了用户体验,另一方面HTML5技术跨平台,适配多终端,改变了传统开发者 ...

  7. [干货，阅后进BAT不是梦]面试心得与总结---阿里、小米、腾讯

    之前实习的时候就想着写一篇面经,后来忙就给忘了,现在找完工作了,也是该静下心总结一下走过的路程了,我全盘托出,奉上这篇诚意之作,希望能给未来找工作的人一点指引和总结, 也希望能使大家少走点弯路 , 如 ...

  8. 一文带你看懂cookie，面试前端不用愁

    本文由云+社区发表 在前端面试中,有一个必问的问题:请你谈谈cookie和localStorage有什么区别啊? localStorage是H5中的一种浏览器本地存储方式,而实际上,cookie本身并 ...

  9. Redis+Twemproxy+HAProxy集群(转) 干货

    原文地址:Redis+Twemproxy+HAProxy集群  干货 Redis主从模式 Redis数据库与传统数据库属于并行关系,也就是说传统的关系型数据库保存的是结构化数据,而Redis保存的是一 ...

随机推荐

  1. awesome mac

    https://proxyman.app/ https://proxie.app/docs/#how-does-it-work https://github.com/kyleduo/TinyPNG4M ...

  2. GetModuleHandleW 分析

    首先查询MSDN,可以清楚地看到 位于kernel32 dll 里面. 有目标就好办,找到这个dll,然后,开工,进入IDA. 跳啊 就到下面那块了. 遗憾的是...显然不是这里阿,实际上下一块调用的 ...

  3. 微信小程序改变全局变量

    假设A为登录页面并将登录获得的用户信息保存到app.js中的全局变量userInfo中,然后在B页面进行使用. app.js globalData:{    userInfo:null, } a.js ...

  4. react 路由使用react-router-dom

    react 和vue一样都是使用封装history 来进行页面跳转,下面就来说一下react常用的路由插件react-router-dom这个东西在GitHub上 目前是最受欢迎的 首相还是先下载 n ...

  5. SolidWorks新建三维零件

    1.创建工作目录. 2.新建一个零件三维模型文件. 3.创建零件中的各个特征 (1).创建第一个特征(基础特征) ①选择命令 ②创建截面草图 定义草图平面 定义截面草图 完成草图 ③定义深度等属性 定 ...

  6. C中为什么不能用==比较字符串？

    通常的回答是,==比较的不是字符串的内容,它是在比较指针.或者说,==(或者!=)仅比较两个字符串的首地址,而不会比较字符串每个字符. 那其实接下来应该问的问题是,为什么会只比较首地址呢? 因为早期的 ...

  7. Python self的用法

    1)不加self是局部变量,只在这个方法里有效:加self则是实例变量,相当于别的函数定义的变量你实例化出来就可以使用 #coding:utf-8 class Person: def __init__ ...

  8. NX二次开发-NXOPEN创建工程图表格Annotations::TableSectionBuilder *tableSectionBuilder1;

    NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...

  9. [NOI.AC] candy

    题意:求净利益. 思路: 其实我也不怎么懂题面. 不过这种题一般来说就是从最大的开始选. 所以考虑贪心. 那么代价如何处理呢?? 我们考虑两个序列同时选数,把代价每次记录到一个序列的和上,那么对于两次 ...

  10. 装hadoop的第一步，装ubuntu并换源并装jdk

    如何装ubuntu,这个自己百度.具体安装网站:http://www.ubuntu.com 我安装的是ubuntu Server版本的,然后是全英文安装.所以它的源自动定位到美国 下面是如何换源的,第 ...