前端开发实战基础——Cookie、Web Storage

发布时间:2024年01月19日

cookie

cookie 的定义

HtTTP cookie 也称为 cookie,中文翻译过来就是曲奇、小甜饼的意思。最初用于在客户端存储会话信息。cookie 在浏览器中,通常以键值对的形式存储

cookie如何产生与存储

cookie 既然是用来存储会话信息的,就是说,他是和服务器之间建立的会话

在浏览器某一个网站应用发起一个请求的时候,服务器会在响应的HTTP 请求时,通过创建一个set-cookie 的头部信息,告诉客户端,需要将set-cookie 包含的键值对存储起来,这个就是cookie的由来。

其中 HTTP 响应头格式如下所示,cookie 的键值对为name=value

HTTP/1.1200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

当下一次这个网站请求服务器接口的时候,浏览器就是将cookie 对应的值添加到请求中,这样服务器通过cookie ,就知道是哪一个客户端发起的请求,cookie用于标识客户端

cookie 的使用限制

cookie 受同源策略限制,其与特定的域名绑定的,不能跨源使用。cookie 在浏览器创建的时候,就和客户端所对应的URL (协议、端口,域名)绑定,其他的域名不能使用这个cookie、

除了同源策略的限制外,cookie本身能存储的信息也受限制,还有以下规则

  • 每个cookie 不能超过4096字节,也就是4kb
  • 每个域不能超过20个cookie

如果某些域超过了这些限制的上限浏览器会删除之前的cookie。有些浏览器随机删除,有些会将最少使用的删除。

cookie构成

cookie 整体有以下的部分构成

  • 名称:名称不区分大小写

  • 值:以字符串形式存储值


  • cookie有效的域,表明cookie只能作用与这个域,发送到这个域的所有请求都包含对应的cookie。可以设置成包含子域默认是不包含

  • 路径
    请求URL地址包含这个路径才会把cookie发送到服务器,例如指定cookie 只能有http://www.a/book/ 访问,因此访问http://www.a/ 不会发送cookie即使是一个域

  • 过期时间
    表示将在什么时候,这个cookie 将会失效,被删除。超过这个时间戳,就不会发送浏览器。默认情况下,浏览器结束回话后,会删除所有cookie,不过,可以设置cookie 的有效时间,这个值为GMT格式(Wdy,DD-MM-YYYY HH:SS GMT),即使关闭回话,没有超过这个时间,cookie 都是存在客户端的

  • 安全标志
    设置之后,只有使用SSL安全连接的情况下,才会把cookie 发送到服务器。请求https协议会。而http不会

设置格式如下:

HTTP/1.1200 0K
Content-type: text/html
Set-Cookie:name=value;expires=Mon,22Jan-0707:10:24GMT;domain=.wrox.com;path =/;secure;
Other-header: other-header-value

JavaScript脚本处理cookie

JavaScript 可以通过 document.cookie 来设置cookie
如下面的代码:

function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 使用示例:设置一个名为"username"的cookie,值为"JohnDoe",有效期为30天
setCookie("username", "JohnDoe", 30);

也可以通过JavaScript来获取cookie

function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

// 使用示例:获取名为"username"的cookie值
var username = getCookie("username");
console.log(username); // 输出:"JohnDoe"

document.cookie 的是以;作为分隔符存储起来的字符串,因此需要使用循环来判断。

cookie使用注意事项

通过设置cookie 的HTTPOnly,可以达到防止JavaScript 操作和访问cookie,只能用于服务器回话。

例如在响应头设置成这样即可。

"Set-Cookie", "cookiename=value;
Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly"

web Storage

除了cookie 能存储信息外,浏览器还提供了 Web Storage 给开发者存储本地信息。Web Storage 包含 localStoragesessionStorage 两个对象。

其中localStorage 与sessionStorage 有所区别,下面具体说明一下:

sessionStorage

特点

sessionStorage 对象只能存储会话数据,没有过期时间限制,这意味着关闭浏览器就会失效。其有以下的特点

  • 页面会话在浏览器打开期间一直保持,刷新或者重新加载页面,浏览器仍然会保留当前会话的sessionStorage
  • 新浏览器窗口和标签复制浏览器URL,都会新建一个会话不共享sessionStorage
  • 关闭对应的浏览器标签或窗口,会清除对应的sessionStorage
语法
// 保存数据到 sessionStorage
sessionStorage.setItem("key", "value");

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem("key");

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem("key");

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

localStorage

localStorage 是永久性本地存储除非手动移除,否则会一直存储在浏览器中,即使是关闭浏览器。
他允许开发者访问当前源的本地存储对象不能跨源共享

代码示例
localStorage.setItem("myCat", "Tom");

//该语法用于读取 localStorage 项,如下
let cat = localStorage.getItem("myCat");

//该语法用于移除 localStorage 项,如下:
localStorage.removeItem("myCat");
// 移除所有
localStorage.clear();

localStorage与 sessionStorage 异同点

  • localStorage与 sessionStorage 都没有过期时间限制,其中sessionStorage 只能在当前会话窗口或标签生效,关闭后则失效,localStorage为永久性存储。

  • localStorage 只能被当前源访问,不能跨源

小结

  • cookie和 localStorage 默认只能在当前源生效,但cookie 可以通过·domain 设置其他源共享
  • cookie 容量限制比 storage 都小,只能存储4kb。
  • cookie 是通过响应头set-cookie字段来设置,之后通过请求头传给服务器。
  • cookie 具有时间有效期,storage 没有时间有效期,但sessionStorage 关闭会话也会失效。
  • localStorage 是永久存储的,除非手动删除,否则一直会存在浏览器,即使关闭了浏览器。
文章来源:https://blog.csdn.net/weixin_43011185/article/details/135626249
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。