cookie、SessionStorage、localStorage的用法

最新推荐文章于 2023-05-14 11:20:27 发布
最新推荐文章于 2023-05-14 11:20:27 发布
阅读量379 收藏 2
点赞数
分类专栏： 存储过程 文章标签： cookie session
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26604017/article/details/76730407
版权

cookie的用法

设置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=%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE&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缺点

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

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

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

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

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

区别

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

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的本地存储的值

区别

  1. 数据大小5M或者更大。
  2. 不会和跟随HTTP请求，所以不会占用资源。
  3. 数据存储在浏览器仅在浏览器为关闭的状态，关闭窗口后数据就会销毁。可以讲是“临时存储”
  4. 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的本地存储的值

区别

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

参考资料

[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详解

秋之旅
关注
专栏目录
cookie、sessionStorage和localStorage的区别（详细）
微微的猪食小窝
11-13 1264
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
Cookie、sessionStorage、localStorage的区别
weixin_43900284的博客
01-30 116
共同点：都是保存在浏览器端，并且是同源的 不同点： Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右） sessionStorage：仅在当前浏览器窗口关闭
cookies，sessionStorage 和 localStorage 的区别
WKY_CSDN的博客
03-24 893
一、什么是localStorage、sessionStorage在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题（cookie中每条cookie的存储空间为4k），localStorage中一般浏览器支持的是5M大小，这个再不同的浏览器中localStorage会有所不同。二、localStorage的优势与局限优
cookie sessionStorage localStorage
小白变怪兽
02-10 408
sessionStorage localStorage cookie
Cookie，sessionStorage，localStorage
09-28 350
document.cookie是一个小型文本文件，大小约4KB 由键值对组成，由分号+空格进行分隔。 虽然cookie存储在浏览器端，但是大部分时候我们是在服务器端对其进行设置，我们可以在http返回体（Response Headers）里面通过设置Set-Cookie这个头部来告诉浏览器端要存储的cookie。 想要唯一标定一个cookie值，需要name、domain、path的组合。
cookie/sessionStorage/localStorage
Anoddguy的博客
07-26 132
cookie，localStorage,sessionStorage区别与应用
01-07
cookie localStorage sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息，只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭，数据清空 存在内存中，除非...
cookie、sessionStorage和localStorage的区别和使用
曹进的博客
07-12 3109
cookie、sessionStorage和localStorage的区别和使用
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
SessionStorage的使用方法与LocalStorage几乎一致： ```javascript // 设置 sessionStorage.setItem("mycolor", "456"); sessionStorage.mycolor = '456'; // 获取 var $color = sessionStorage.getItem("mycolor...
cookie、sessionStorage和localStorage的区别
aliyun3的博客
04-25 1424
一、 概念的理解 webstorage本地存储 1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage 2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信 3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（
Cookie、SessionStorage、LocalStorage
盖世小可爱的博客
08-27 102
cookie SessionStorage LocalStorage
sessionstorage的数据结构_Cookie、sessionStorage和localStorage
weixin_33300389的博客
01-28 225
一 HTML4的本地存储cookie cookie和session都是用来跟踪浏览器用户身份的会话方式。我们通过了解两者的区别来了解cookie：1、保持状态：cookie保存在浏览器端，session保存在服务器端2,使用方式：Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它。服务器收到请求需要创建session对象时，首先会检...
关于cookie，sessionStorage和localStorage。
搬砖小鱼，请多指教呦
03-28 523
简单谈一下我对于cookie，sessionStorage和localstorage的认识，如果有不对的地方欢迎指正一起进步 cookie 优点： 极高的扩展性和可用性 1) 数据持久性。 2) 不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读取。 3) 可配置到期规则。 控制 cookie 的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的 cookie 。 ...
cookie & session & localStorage & sessionStorage
pscool的博客
05-14 1697
由于HTTP是一种无状态的协议，服务器单从网络连接上是无法知道客户身份的。这时候服务器就需要给客户端颁发一个cookie，用来确认用户的身份。简单的说，cookie就是客户端保存用户信息的一种机制，用来记录用户的一些信息。原理:web服务器通过在http响应消息头增加Set-Cookie响应头字段将Cookie信息发送给浏览器，浏览器则通过在http请求消息中增加Cookie请求头字段将Cookie回传给web服务器。
本地存储 cookie sessionStorage 和 localStorage (用法，作用，区别，案例)
温情
06-06 401
相同作用 本地存储保存数据，都存储在浏览器端(客户端) 三者区别 存储大小 cookie 数据大小不能超过 4Kb，而 sessionStorage 和 localStorage 一般为 5MB 或更大 生命周期 cookie: 默认跟随浏览器关闭而销毁，但可以自己设置过期时间 sessionStorage: 关闭页面或浏览器时销毁 localStorage: 一直保存，不会自动销毁，除非手动销毁 数据与服务器之间的交互 cookie: 会在每次请求中被携带到服务器端，如果使用co
本地存储Cookie、localStorage、sessionStorage
沉迷学习 日渐消瘦
11-15 1950
cookie、localStorage、sessionStorage都是存储在用户本地终端上的数据，一般会经过加密处理（例如base64编码）。通常将一些用户个人数据，例如用户名等存储在本地，既方便了用户的使用，也利于多个页面间传递数据时不用通过多次的请求服务器。cookiecookie采用”键=值”方式进行存储，且可以设置cookie的过期时间，在过期时间之前，即使窗口关闭或浏览器关闭，cooki
cookie、 sessionStorage 、localStorage之间的区别和使用
weixin_33985507的博客
06-27 225
1.cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站。 2.HTML5 提供了两种在客户端存储数据的新方法：(http://www.w3school.com.cn/html5/html_5_webstorage.asp)...两者都是仅...
localStorage、sessionStorage、cookie本地存储
weixin_45629623的博客
02-11 141
纯干货总结 localStorage是永久存储在本地，除非你主动去删除; sessionStorage是存储到当前页面关闭为止; cookie可设置的有效时间来存储，小容量且不易读取，可服务器客服端交互。 calStorage和sessionStorage具有相同的方法，具体如下(以localStorage为例)： 1.新增缓存数据: localStorage.setItem(变量名,value)...
Web面试题整理
吾娱生活的专栏
09-21 189
问：Doctype作用是什么? 严格模式与混杂模式如何区分？它们有何意义? 答：Doctype位于整个文档的最前面，用于告知浏览器解析器用什么文档类型来解析该文档； 严格模式：使得排版和JS运作以浏览器支持的最高标准运行 混杂模式：使得排版和JS运作以向后兼容的方式运行，防止比较老的站点无法工作的问题； 问：tcp三次握手，一句话概括 答：客户端发起请求连接服务端确认，服务端也发起连接客户端确认，每次握手的作用：第一次握手：服务端只可以确认 自己可以接受客户端发送的报文段；第二次握手：客户端可以确
localStorage sessionStorage cookie
最新发布
08-19
sessionStorage的使用方法和localStorage相似，也是通过setItem、getItem和removeItem等方法来操作数据。 cookie是一种在浏览器和服务器之间传递的小型文本文件，用于存储会话相关的信息。与localStorage和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值