cookie、SessionStorage、localStorage的用法

xiaoxiao2021-02-28 103

cookie的用法

cookie的用法设置cookie读取cookie删除cookie参数注释例子 cookie优点cookie缺点区别 SessionStorage的用法获取sessionStorage添加sessionStorage删除sessionStorage区别 localStorage的用法获取localStorage添加localStorage删除localStorage区别参考资料

设置cookie

function setCookie(name,value,hours,path,domain,secure){ var cdata = name + "=" + value; if(hours){ var d = new Date(); d.setHours(d.getHours() + hours); cdata += "; expires=" + d.toGMTString(); } cdata +=path ? ("; path=" + path) : "" ; cdata +=domain ? ("; domain=" + domain) : "" ; cdata +=secure ? ("; secure=" + secure) : "" ; document.cookie = cdata; }

读取cookie

function getCookie(name){ var reg = eval("/(?:^|;\\s*)" + name + "=([^=]+)(?:;|$)/"); return reg.test(document.cookie) ? RegExp.$1 : ""; }

删除cookie

function removeCookie(name,path,domain){ this.setCookie(name,"",-1,path,domain); }

参数注释

名称（name）：一个唯一确定cookie的名称，部分大小写，cookie的名字必须是经过URL编码的，一般可以采用某个前缀在加上当前时间的做法，这样的话名称能够确保是唯一的，也比较方便。

值（value）：存储在cookie中的字符串值，必须经过被URL编码

失效时间（hours）：小时为单位

路径（path）：指定域中的那个路径，应该想服务器发送cookie，/ 表示没有限制

安全标志（secure）：指定以后，cookie只有在使用SSL连接的时候才可以发送到服务器。设定cookie为安全的(secure=true),只能在HTTPS或与其他安全协议，连接在一起的时候才被传输。

域（domain）：对于哪个域是有效的，如果没有设置的话，默认来自设置cookie的那个域，在上诉例子中就是.Mozilla.org

例子

setCookie(“phone”,”444”,24,”/”,”.”,false);

删除名称为”phone”的cookie removeCookie (“phone”)

如果设置时设定了path参数，删除名称为”phone”的cookie时，也需要传入对应path参数 removeCookie(“phone”,”/”)

<html> <head> <script language="javascript"> function Window_Load(){ setCookie("name","111"); //临时cookie setCookie("age","222",24 * 7); //保存7天 setCookie("address","333",24,"/"); //保存1天,path为根目录 //设定cookie为安全的(secure=true),只能在HTTPS或与其他<a href="https://www.baidu.com/s?wd=安全协议&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLmWTznymLrjN9njm3rjP-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHmLrj6vrHcs" target="_blank" class="baidu-highlight">安全协议</a> //连接在一起的时候才被传输 setCookie("phone","444",24,"/",".",false); alert(document.cookie); alert(getCookie("age")); //删除名称为"age"的cookie removeCookie("age") alert(document.cookie); //删除名称为"address"的cookie,因为设置时设定的path,所以删除 //时也需要传入对应path removeCookie("address","/") alert(document.cookie); } function setCookie(name,value,hours,path,domain,secure){ var cdata = name + "=" + value; if(hours){ var d = new Date(); d.setHours(d.getHours() + hours); cdata += "; expires=" + d.toGMTString(); } cdata +=path ? ("; path=" + path) : "" ; cdata +=domain ? ("; domain=" + domain) : "" ; cdata +=secure ? ("; secure=" + secure) : "" ; document.cookie = cdata; } function getCookie(name){ var reg = eval("/(?:^|;\\s*)" + name + "=([^=]+)(?:;|$)/"); return reg.test(document.cookie) ? RegExp.$1 : ""; } function removeCookie(name,path,domain){ this.setCookie(name,"",-1,path,domain); } </script> </head> <body onload="Window_Load();"> </body> </html>

cookie优点

1.通过良好的编程，控制保存在cookie中的session对象的大小。 2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。 3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。 4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。、 5.不需要服务器资源，直接存储在本地。

cookie缺点

每个域的cookie总数是有限的，不同浏览器之间各有不同。

IE6以及更低版本限制每个域名最多20个cookieIE7之后的版本每个域名最多50个。Firefox限制每个与最多50个cookieSafari和Chrome对于每个域的cookie数量限制没有硬性规定。

cookie的清理 IE和Opera会删除最近最少使用过的cookie，但是Firefox是随机决定要清除哪个cookie。

cookie大小的限制大多数浏览器4096B的长度限制，为了兼容多种浏览器，最好将长度限制在4095B以内. 每个domain最多只能有20条cookie。

安全性 Cookie文件中可能含有涉密信息，可能会导致信息泄露。 Cookie可以被改写，欺骗服务程序或者搜集资料从事非法活动。

区别

数据大小不能超过4KB。不管是否有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器中来回传递，占用资源。可以在后端设置修改，数据仅在本地浏览器保存。cookie数据可以设置路径，限制cookie只属于某个路径下。默认数据失效是关闭浏览器，也可以设置失效时间

SessionStorage的用法

获取sessionStorage

sessionStorage.getItem(keyName); //获取指定key的本地存储的值 //或者 var keyName=sessionStorage.key;

添加sessionStorage:

sessionStorage.setItem(keyName,value); // 将value存储到key字段中 //或者 sessionStorage.keyName='value';

删除sessionStorage

sessionStorage.removeItem(keyName); // 删除指定ke的本地存储的值

区别

数据大小5M或者更大。不会和跟随HTTP请求，所以不会占用资源。数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。可以讲是“临时存储”sessionStorage在不同浏览器窗口下不会共享数据，即使打开同一个页面。

localStorage的用法

获取localStorage:

localStorage.getItem(keyName); //获取指定key的本地存储的值 //或者 var keyName=localStorage.key;

添加localStorage:

localStorage.setItem(keyName,value); // 将value存储到key字段中 //或者 localStorage.keyName='value';

删除localStorage:

localStorage.removeItem(keyName); // 删除指定ke的本地存储的值

区别

数据大小5M或者更大。不会和跟随HTTP请求，所以不会占用资源。数据保存在本地硬件设备（通常指硬盘，也可以是其他），需要用户主动删除，否则就是永久保存。不同浏览器之间不会共享数据。

参考资料

[1]: < https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie#Summary > [2]: 《JavaScript高级程序设计》Nicholas C.Zakas著李松峰曹力译 [3]: < https://zhidao.baidu.com/question/567886920.html > [4]: < https://segmentfault.com/a/1190000010098593 > [5]: < http://blog.csdn.net/thronest/article/details/76850550 > [6]: cookie详解

转载请注明原文地址: https://www.6miu.com/read-32103.html

技术

最新回复(0)