温故js系列（3）-cookie优缺点&设置获取删除cookie

Vultr 发布于2019-08-19 18:43 / 2654人阅读

摘要：优缺点优点只在中存放不敏感数据，即使被盗也不会有重大损失。控制的生命期，使之不会永远有效。极高的扩展性和可用性，使用简单，操作方法方便缺点数量和长度的限制。每个长度不能超过，否则会被截掉。设置一般主要设置名字和值有效期路径域名是否安全传输。

前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总

欢迎提issues斧正：cookie

JavaScript--cookie

cookie可以像身份证一样在客户端请求服务器的时候确定信息。也可以在客户端分担服务端的压力，做很多判断和存储信息。

cookie 优缺点

优点：
1.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
2.控制cookie的生命期，使之不会永远有效。就算被盗了偷盗者很可能拿到的是一个过期的cookie。
3.cookie帮助服务端承担了很大的压力，可以利用cookie在和客户端做很多判断而不应经过服务端。
4.极高的扩展性和可用性，使用简单，操作方法方便
缺点：
1.cookie数量和长度的限制。每个cookie长度不能超过4KB，否则会被截掉。IE下每个domain最多只能有50条cookie（IE6是20条），Firefox最多50个cookie，chrome和Safari没有做硬性限制，IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。
2.安全性问题。这是cookie一个隐患，如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。所以还是有一定的局限性。

设置cookie

一般主要设置cookie名字和值、cookie有效期、路径、域名、是否安全传输。
原生方法：

document.cookie="key="+value;

封装方法：

function setCookie(key, value, expires, path, domain, secure) {     
    var cookieText = encodeURIComponent(key) + "=" + encodeURIComponent(value);     
    if (expires instanceof Date) {         
        cookieText += "; expires=" + expires;     
    }     
    if (path) {         
        cookieText += "; expires=" + expires;     
    }     
    if (domain) {         
        cookieText += "; domain=" + domain;     
    }     
    if (secure) {         
        cookieText += "; secure";     
    }     
    document.cookie = cookieText; 
}

JQuery方法（JQuery没有封装cookie方法，需要下载基于JQuery的插件jquery.cookie.js）：

$.cookie("key","value",{
    expires：7,
    path："/",
    domain: "xxx.com",
    secure: false
});

获取cookie

原生方法：

var cookieStr = document.cookie;  //cookieStr=="username=Xzavier;password=123456;sex=man"

这样获得了所有的cookie，是一个字符串。根据需要选取，比如：

var username=document.cookie.split(";")[0].split("=")[1];
var password=document.cookie.split(";")[1].split("=")[1];

封装方法：

function getCookie(key) {     
    var cookieName = encodeURIComponent(key) + "=";     
    var cookieStart = document.cookie.indexOf(cookieName);     
    var cookieValue = null;     
    if (cookieStart > -1) {         
        var cookieEnd = document.cookie.indexOf(";", cookieStart);         
        if (cookieEnd == -1) {             
            cookieEnd = document.cookie.length;         
        }         
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));     
    }     
    return cookieValue; 
}

JQuery方法：

$.cookie(‘key’); //value?value:null

删除cookie

原生方法：

document.cookie = "key=value;expires=" + new Date(0); //时间可以是现在以及现在之前

封装方法：

function unsetCookie(key) {     
    document.cookie = key + "= ; expires=" + new Date(0); 
}

JQuery方法：

$.cookie(‘key’,null);

其他参数设置：

$.cookie("key", value, {
    expires: new Date(0),
    path: "/",
    domain: "xxx.com"
});

cookie在持久保存客户端数据提供了方便，分担了服务器存储的负担，虽然有局限性，但是不可替代的。使用的方法也非常简单，但平时使用cookie的时候也需要多多注意安全性。

jquery.cookie.js下载：jquery.cookie.js
cookie弊端参考：cookie弊端

云服务器 GPU云服务器 JS删除cookie js 获取cookie的数据删除cookie javascript删除cookie

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79907.html

温故js系列（6）-DOM

摘要：相同之处标准的与是同步的。公认的非自定义的特性会被以属性的形式添加到对象中。不过传递给的特性名与实际的特性名相同。如，，，，等事件处理程序。最好控制在最合理的范围内。返回了元素大小，默认单位是。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：DOM JavaScript-DOM DOM简介 DOM（Do...

xiaochao 2019-08-20 10:19 评论0 收藏0
温故js系列（12）-ajax&amp;&amp;优缺点&amp;&amp;node后端

摘要：接收响应当请求发送到服务器端，收到响应后，响应的数据会自动填充对象的属性。一般而已状态代码为作为成功的标志。必要时，可以将查询字符串参数追加到的末尾，以便提交给服务器。后端实现可以自学一点后端知识，便于学习。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：Ajax JavaScript-Ajax&&no...

LiangJ 2019-08-20 10:33 评论0 收藏0
温故知新之JS基础

摘要：访问属性是通过操作符完成的，但这要求属性名必须是一个有效的变量名小红的属性名不是一个有效的变量，就需要用括起来。闭包应用封装私有变量箭头函数箭头函数相当于匿名函数，并且简化了函数定义。数据类型 NAN NaN === NaN; // false 唯一能判断NaN的方法是通过isNaN()函数： isNaN(NaN); // true 浮点数的相等比较： 1 / 3 === (...

Dr_Noooo 2019-08-20 11:29 评论0 收藏0
温故js系列（14）-闭包&amp;垃圾回收&amp;内存泄露&amp;闭包应用&amp;作用域链&

摘要：该对象包含了函数的所有局部变量命名参数参数集合以及，然后此对象会被推入作用域链的前端。如果整个作用域链上都无法找到，则返回。此时的作用域链包含了两个对象的活动对象和对象。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：闭包 JavaScript-闭包闭包(closure)是一个让人又爱又恨的somet...

Amio 2019-08-22 10:36 评论0 收藏0
html&amp;&amp;css

摘要：标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。控制表单控件的禁用状态。首先，巧妙的使用这一标记，将游览器从所有情况中分离出来。 1.Doctype作用？标准模式与兼容模式各有什么区别声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器,用什么文档标准解析这个文档。DOCTYPE不存在...

gggggggbong 2019-08-29 16:16 评论0 收藏0