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

文章目录

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 包含 localStorage 和 sessionStorage 两个对象。

其中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 是永久存储的，除非手动删除，否则一直会存在浏览器，即使关闭了浏览器。