好家伙,本篇为《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()解码。

class CookieUtil {
static get(name) {
let cookieName = `${encodeURIComponent(name)}=`,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart +
cookieName.length, cookieEnd));
}
return cookieValue;
}
static set(name, value, expires, path, domain, secure) {
let cookieText =
`${encodeURIComponent(name)}=${encodeURIComponent(value)}`
if (expires instanceof Date) {
cookieText += `; expires=${expires.toGMTString()}`;
}
if (path) {
cookieText += `; path=${path}`;
}
if (domain) {
cookieText += `; domain=${domain}`;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
}
static unset(name, path, domain, secure) {
CookieUtil.set(name, "", new Date(0), path, domain, secure);
}
}; // 设置 cookie
CookieUtil.set("name", "panghu");
// 读取 cookie
alert(CookieUtil.get("panghu")); // "panghu"

(然而我这并没有出现正确结果)

2.Web Storage

Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数 据时使用 cookie 的问题。

分为localStorage 和 sessionStorage

2.1.sessionStorage对象

sessionStorage 对象只存储会话数据,这意味着数据只会存储到浏览器关闭。

存储在 sessionStorage 中的数据不受页面刷新影响,可以在浏览器崩溃 并重启后恢复。

基本用法(增删查改)

// 使用方法存储数据
sessionStorage.setItem("name", "胖虎");
// 使用属性存储数据
sessionStorage.book = "好书"; // 使用方法取得数据
let name = sessionStorage.getItem("name");
// 使用属性取得数据
let book = sessionStorage.book; console.log(name+book)
// 使用 delete 删除值
delete sessionStorage.name;
// 使用方法删除值
sessionStorage.removeItem("book"); console.log(sessionStorage);

 

2.2.localStorage 对象

要访问同一个 localStorage 对象,页面必须来自同一个域(子域不可以)、在相同的端 口上使用相同的协议。

localStorage和sessionStorage的Api用法差不太多

// 使用方法存储数据
localStorage.setItem("name", "余华");
// 使用属性存储数据
localStorage.book = "活着";
// 使用方法取得数据
let name = localStorage.getItem("name");
// 使用属性取得数据
let book = localStorage.book; console.log(name+book) // 使用 delete 删除值
delete localStorage.name;
// 使用方法删除值
localStorage.removeItem("book"); console.log(localStorage);

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户 清除浏览器缓存。

localStorage 数据不受页面刷新影响,也不会因关闭窗口、标签页或重新启动浏览 器而丢失

3.IndexedDB

嗯,这玩意就是浏览器中的数据库

IndexedDB 背后的思想是创造一套 API,方便 JavaScript 对象的 存储和获取,同时也支持查询和搜索

前端本地存储数据库IndexedDB完整教程 - 掘金 (juejin.cn)

4.题目

1.说出cookie、localStorage和sessionStorage三者的不同点和相同点

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

第128篇:浏览器存储(cookie、webStorage、 IndexedDB)的更多相关文章

  1. 浏览器存储(cookie、localStorage、sessionStorage)

    互联网早期浏览器是没有状态维护,这个就导致一个问题就是服务器不知道浏览器的状态,无法判断是否是同一个浏览器.这样用户登录.购物车功能都无法实现,Lou Montulli在1994年引入到web中最终纳 ...

  2. BOM / URL编码解码 / 浏览器存储

    BOM 浏览器对象模型 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的 ...

  3. 如何从桌面程序向浏览器传递cookie或自定义header

    类似问题 从c#程序启动ie并传递cookie 打开默认浏览器并传递cookie 打开一个web浏览器使用c#应用程序并添加请求头 猜想 从wpf程序打开默认浏览器并定位到一个url ,并且向这个ur ...

  4. 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB

    摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...

  5. 离线应用与客户端存储(cookie storage indexedDB)

    离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...

  6. 浅谈浏览器存储(cookie、localStorage、sessionStorage)

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Co ...

  7. cookie是指web浏览器存储的少量数据,该数据会在每次请求一个相关的URL时自动传到服务器中(转)

    基本概念:cookie是指web浏览器存储的少量数据,该数据会在每次请求一个相关的URL时自动传到服务器中. 以博客园为例,我们看看cookie有哪些属性: 1.Name:cookie的名称: 2.V ...

  8. Node.js_express_浏览器存储技术 Cookie(服务器将少量数据交于浏览器存储管理)

    浏览器存储技术 Cookie 服务器将少量数据交于浏览器存储管理 解决 http 无状态协议的问题(无法区分多次请求是否发送自同一客户端) 一个网页一般最多 20个的 cookie,每个 cookie ...

  9. 浏览器存储:cookie

    Cookie是什么:cookie是指存储在用户本地终端上的数据,同时它是与具体的web页面或者站点相关的.Cookie数据会自动在web浏览器和web服务器之间传输,也就是说HTTP请求发送时,会把保 ...

  10. 原生JavaScript常用本地浏览器存储方法二(cookie)

    JavsScript Cookie概述 cookie是浏览器提供的一种机制,它将document对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是Jav ...

随机推荐

  1. [转帖]History of Web Browser Engines from 1990 until today

    https://eylenburg.github.io/browser_engines.htm Many tried, few remain... Last updated: January 2023 ...

  2. 学习MySQL中DDL语句的修改字段与删除字段,删除表

    连接本地mysql语句 mysql -hlocalhost -uroot -proot 显示表结构 语法:desc 表名 查看某一个表结构以及注释 语法:show create table 表名 sh ...

  3. React类组件中事件绑定this指向的三种方式

    有状态组件和无状态组件 函数组件又叫做无状态组件,类组件又叫做有状态组件. 状态又叫做数据 函数组件没有自己的状态,只负责静态页面的展示. 我们可以理解为纯ui展示.() 类组件有自己的状态,扶着更新 ...

  4. 插件时间格式处理moment如何使用

    第1步下载插件 cnpm i moment -S 第2步 在main.js中去使用 在main.js中 注册全局过滤器 fmtdata是等会你用的 可以自定义 fmtdata直接可以调用.是一个过滤器 ...

  5. 【JS 逆向百例】HN某服务网登录逆向,验证码形同虚设

    声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 逆向目标 目标:某政务服务 ...

  6. Machine Learning | Coursera 课后代码

    Machine Learning | Coursera GitHub地址:https://github.com/hanlulu1998/Coursera-Machine-Learning Machin ...

  7. 【三】AI Studio 项目详解——单机多机训练分布式训练--PARL

    相关文章 [一]-环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简介 [五]-Sarsa&Qlear ...

  8. MySQL 数据库读写分离

    MySQL 是最流行的关系型数据库管理系统,MySQL 配置主备模式,基于一台服务器的数据复制,故得名单机热备,主-备 Active-Standby主-备方式,即指的是一台服务器处于某种业务的激活状态 ...

  9. 月薪10K码农,跳槽到40K架构师,技术学习路线图汇总

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.介绍 Hey there! Roadmap to becoming a web devel ...

  10. 14代i5-14600K现身:多核性能提升多达11%

    14代酷睿桌面端还未发售,就陆续在跑分平台上露出. 平台规格为Z790主板.32GB DDR5-5200内存,酷睿i5-14600K的单核成绩为2819,多核成绩为16666,对比酷睿i5-13600 ...