javascript基础学习系列三百七十八： cookie 有两个方法:get()和 getAll()

最新推荐文章于 2024-06-21 09:58:06 发布

完美句号

最新推荐文章于 2024-06-21 09:58:06 发布

阅读量391

点赞数 5

文章标签： javascript 学习开发语言前端性能优化系统架构架构

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135990175

版权

文章介绍了CookieUtil类的set(),get(),unset()方法，用于操作浏览器cookie，包括设置、读取和删除。同时详细讲解了子cookie的概念，如何通过SubCookieUtil类实现子cookie的获取和管理，以克服单域cookie数量限制。

摘要由CSDN通过智能技术生成

CookieUtil.set()方法用于设置页面上的 cookie，接收多个参数:cookie 名称、cookie 值、可
选的 Date 对象(表示何时删除 cookie)、可选的 URL 路径、可选的域以及可选的布尔值(表示是否添加 secure 标志)。这些参数以它们的使用频率为序，只有前两个是必需的。在方法内部，使用了
这些参数会传给 CookieUtil.set()，将 cookie 值设置为空字符串，将过期时间设置为 1970 年 1 月 1 日(以 0 毫秒初始化的 Date 对象的值)。这样可以保证删除 cookie。
可以像下面这样使用这些方法:

CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com", 21
// 读取cookie
alert(CookieUtil.get("name")); // "Nicholas" alert(CookieUtil.get("book")); // "Professional JavaScript"
// 删除刚刚设置的cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
// 设置安全cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);
这些方法通过处理解析和 cookie 字符串构建，简化了使用 cookie 存储数据的操作。 25.1.4 子cookie
// 删除cookie CookieUtil.unset("name"); CookieUtil.unset("book");
// 设置有路径、域和过期时间的cookie
new Date("January 1, 2010"));

为绕过浏览器对每个域 cookie 数的限制，有些开发者提出了子 cookie 的概念。子 cookie 是在单个 cookie 存储的小块数据，本质上是使用 cookie 的值在单个 cookie 中存储多个名/值对。最常用的子 cookie 模式如下:
name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

encodeURIComponent()对名称和值进行编码，然后再依次检查其他参数。如果 expires 参数是 Date 对象，则使用 Date 对象的 toGMTString()方法添加一个 expires 选项来获得正确的日期格式。剩下的代码就是简单地追加 cookie 字符串，最终设置给 document.cookie。
没有直接删除已有 cookie 的方法。为此，需要再次设置同名 cookie(包括相同路径、域和安全选项)， 16 但要将其过期时间设置为某个过去的时间。CookieUtil.unset()方法实现了这些处理。这个方法接收
4 个参数:要删除 cookie 的名称、可选的路径、可选的域和可选的安全标志。


// 设置cookie 18 CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional JavaScript");

子 cookie 的格式类似于查询字符串。这些值可以存储为单个 cookie，而不用单独存储为自己的名/ 值对。结果就是网站或 Web 应用程序能够在单域 cookie 数限制下存储更多的结构化数据。
要操作子 cookie，就需要再添加一些辅助方法。解析和序列化子 cookie 的方式不一样，且因为对子 cookie 的使用而变得更复杂。比如，要取得某个子 cookie，就需要先取得 cookie，然后在解码值之前需要先像下面这样找到子 cookie:

   class SubCookieUtil {
      static get(name, subName) {
        let subCookies = SubCookieUtil.getAll(name);
        return subCookies ? subCookies[subName] : null;
 }
      static getAll(name) {
        let cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd,
            subCookies,
            parts,
            result = {};
        if (cookieStart > -1) {
          cookieEnd = document.cookie.indexOf(";", cookieStart);
          if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
          }
          cookieValue = document.cookie.substring(cookieStart +
                                                  cookieName.length, cookieEnd);
          if (cookieValue.length > 0) {
            subCookies = cookieValue.split("&");
            for (let i = 0, len = subCookies.length; i < len; i++) {
              parts = subCookies[i].split("=");
              result[decodeURIComponent(parts[0])] =
                decodeURIComponent(parts[1]);
            }
            return result;
          }
}
        return null;
      }
// 省略其他代码 };

取得子 cookie 有两个方法:get()和 getAll()。get()用于取得一个子 cookie 的值，getAll() 用于取得所有子 cookie，并以对象形式返回，对象的属性是子 cookie 的名称，值是子 cookie 的值。get() 方法接收两个参数:cookie 的名称和子 cookie 的名称。这个方法先调用 getAll()取得所有子 cookie，然后返回要取得的子 cookie(如果不存在则返回 null)。

SubCookieUtil.getAll()方法在解析 cookie 值方面与 CookieUtil.get()方法非常相似。不同的是 SubCookieUtil.getAll()方法不会立即解码 cookie 的值，而是先用和号(&)拆分，将所有子 cookie 保存到数组。然后，再基于等号(=)拆分每个子 cookie，使 parts 数组的第一个元素是子 cookie 的名称，第二个元素是子 cookie 的值。两个元素都使用 decodeURIComponent()解码，并添加到 result 对象，最后返回 result 对象。如果 cookie 不存在则返回 null。