第128篇:浏览器存储(cookie、webStorage、 IndexedDB)

正月雨

好家伙，本篇为《JS高级程序设计》第二五章“浏览器存储”学习笔记
 
我们先来讲个故事
一个“薅羊毛”的故事 (qq.com)
概括一下，就是
有个人通过网络平台非法购买了大量“cookie”数据。
突破平台封控，冒用他人新用户身份，非法骗取新用户优惠券。
拿着优惠券低价购入商品，随后转卖并从中赚取差价。
再将使用过的“cookie”数据再次低价转卖或转赠他人，从中获利。（太狠了）
随后我们回到正题
 
我们进入一个需要登陆的网站，我们注册登录
随后，我们希望每次进入的时候，都不再需要手动输入信息登录，
我们希望浏览器中保存着我们的信息
于是，直接在客户端存储用户信息的需求出现了
 
常见存储方式主要有两种：cookie、webStorage（localStorage和sessionStorage）
 
1.cookie

HTTP cookie 通常也叫作 cookie，最初用于在客户端存储会话信息。
这个规范要求服务器在响应 HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含会话信息。
 
 
1.1.cookie 的限制

cookie 是与特定域绑定的。设置 cookie 后，它会与请求一起发送到创建它的域。
这个限制能保证 cookie 中存储的信息只对被认可的接收者开放，不被其他域访问。
 不超过 300 个 cookie；
 每个 cookie 不超过 4096 字节；
 每个域不超过 20 个 cookie；
 每个域不超过 81 920 字节。
 
1.2.cookie的组成

cookie 的限制（来看看他长什么样子）

 

 
 名称：唯一标识 cookie 的名称。cookie 名不区分大小写
 值：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。
 域：cookie 有效的域。发送到这个域的所有请求都会包含对应的 cookie。
 路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。
 过期时间：表示何时删除 cookie 的时间戳（
 安全标志：设置之后，只在使用 SSL 安全连接的情况下才会把 cookie 发送到服务器。
 
1.3.使用

所有名和值都是 URL 编码的，因此必须使用 decodeURIComponent()解码。

1. <strong>class CookieUtil {
2.     static get(name) {
3.         let cookieName = `${encodeURIComponent(name)}=`,
4.             cookieStart = document.cookie.indexOf(cookieName),
5.             cookieValue = null;
6.         if (cookieStart > -1) {
7.             let cookieEnd = document.cookie.indexOf(";", cookieStart);
8.             if (cookieEnd == -1) {
9.                 cookieEnd = document.cookie.length;
10.             }
11.             cookieValue = decodeURIComponent(document.cookie.substring(cookieStart +
12.                 cookieName.length, cookieEnd));
13.         }
14.         return cookieValue;
15.     }
16.     static set(name, value, expires, path, domain, secure) {
17.         let cookieText =
18.             `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
19.         if (expires instanceof Date) {
20.             cookieText += `; expires=${expires.toGMTString()}`;
21.         }
22.         if (path) {
23.             cookieText += `; path=${path}`;
24.         }
25.         if (domain) {
26.             cookieText += `; domain=${domain}`;
27.         }
28.         if (secure) {
29.             cookieText += "; secure";
30.         }
31.         document.cookie = cookieText;
32.     }
33.     static unset(name, path, domain, secure) {
34.         CookieUtil.set(name, "", new Date(0), path, domain, secure);
35.     }
36. };
38. // 设置 cookie
39. CookieUtil.set("name", "panghu");
40. // 读取 cookie
41. alert(CookieUtil.get("panghu")); // "panghu" </strong>

复制代码

(然而我这并没有出现正确结果)
 
 
 
2.Web Storage

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数 据时使用 cookie 的问题。
分为localStorage 和 sessionStorage
 
2.1.sessionStorage对象

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。
存储在 sessionStorage 中的数据不受页面刷新影响，可以在浏览器崩溃 并重启后恢复。
 
基本用法(增删查改)

1. <strong>// 使用方法存储数据
2. sessionStorage.setItem("name", "胖虎");
3. // 使用属性存储数据
4. sessionStorage.book = "好书";
6. // 使用方法取得数据
7. let name = sessionStorage.getItem("name");
8. // 使用属性取得数据
9. let book = sessionStorage.book;
11. console.log(name+book)
12. // 使用 delete 删除值
13. delete sessionStorage.name;
14. // 使用方法删除值
15. sessionStorage.removeItem("book");
17. console.log(sessionStorage);</strong>

复制代码

 

 
 
2.2.localStorage 对象

要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端 口上使用相同的协议。
localStorage和sessionStorage的Api用法差不太多

1. <strong>// 使用方法存储数据
2. localStorage.setItem("name", "余华");
3. // 使用属性存储数据
4. localStorage.book = "活着";
5. // 使用方法取得数据
6. let name = localStorage.getItem("name");
7. // 使用属性取得数据
8. let book = localStorage.book;
10. console.log(name+book)
12. // 使用 delete 删除值
13. delete localStorage.name;
14. // 使用方法删除值
15. localStorage.removeItem("book");
17. console.log(localStorage);</strong>

复制代码

 

 
存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户 清除浏览器缓存。
localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览 器而丢失
 
 
3.IndexedDB

嗯，这玩意就是浏览器中的数据库
IndexedDB 背后的思想是创造一套 API，方便 JavaScript 对象的 存储和获取，同时也支持查询和搜索
 前端本地存储数据库IndexedDB完整教程 - 掘金 (juejin.cn)
 
4.题目
1.说出cookie、localStorage和sessionStorage三者的不同点和相同点

 
 图片来自浅谈浏览器存储（cookie、localStorage、sessionStorage） - 喵小Q - 博客园 (cnblogs.com)
 

来源:https://www.cnblogs.com/FatTiger4399/p/17206159.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！