yq

# 一、概述 ## 1.1 什么是Cookie Cookie是服务器存储在客户端的数据（小段文本）。 这是见过最好的描述，你品，你细品。 ## 1.2 为啥需要Cookie HTTP是[stateless](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview#HTTP_is_stateless_but_not_sessionless)，Cookie是实现HTTP State Management Mechanism。 1. HTTP客户端通过Cookie让HTTP Server识别自己； 2. Cookie存储在HTTP客户端，HTTP请求头`Cookie`传给给HTTP服务端； 3. HTTP服务端通过响应头`Set-Cookie`管理HTTP客户端存储的Cookie； 4. Cookie数据需要在HTTP会话中传递，所以Cookie数据必须小。 ## 1.3 Cookie的限制 ### 大小、数量： 1. 为了防止滥用cookie导致HTTP请求头过大，各浏览器对一个domain的cookie数据和cookie大小都有限制。...

# 浏览器操作Cookie 1. 客户端操作Cookie受限比较多些（作用域，httpOnly)。 2. `document.cookie`表示当前文档能访问的cookie（这也是为啥`cookie`熟悉不是在`window`对象下）。 # [`document.cookie`](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie) ```js // 读所有的cookies allCookies = document.cookie; // 写单个cookie document.cookie = newCookie; ``` 1. `document.cookie`作为右值时，则返回当前`domain`下可以访问且有效的cookie（key-value对）字符串列表。 ```js "_test_k1=hello1; _test_k3=world3; _test_session=session%20cookie;" ``` 2. `document.cookie`作为左值时，表示对**单个cookie**进行操作（新增，编辑，删除）。 3....

# 服务端操作Cookie ## 1. 基于Nodejs HTTP服务端 1. 采用HTTP的语法规则+借助第三方的cookie操作库 ## 2. 基于Expressjs库 HTTP服务端 expressjs提供了更加语义化的操作API。 1. [req.cookies](https://expressjs.com/en/4x/api.html#req.cookies) 2. [res.cookie(name, value [, options])](https://expressjs.com/en/4x/api.html#res.cookie) 3. [cookie-parse](https://github.com/expressjs/cookie-parser/blob/master/index.js)中间件内部还是依赖[cookie](https://github.com/jshttp/cookie#readme) - Express还支持对cookie的`value`进行加密、解密处理（缺点就是影响性能）

# `Cookie`安全 1. XSS 2. CSRF - SameSite [SameSite](https://github.com/yaofly2012/note/issues/162)

# 实战：上传截屏的图片 # 一、监听`paste`事件 ## 绑定在`window`对象上 ```js // Ctrl+V useEffect(() => { if(disabled) { return; } domHelpers.addEventListener(window, 'paste', handlePaste); function handlePaste(e) { const { files } = e.clipboardData || window.clipboardData...

# Lists and Keys # 引入背景 React组件`render`方法返回的是个React元素构成的树。当组件的`props`或者`state`发生变更时，`render`方法会返回一个新的React元素构成的树。React采用一个启发式（简化的）diffing算法计算出两颗树的差异。详细的得看看[React协调](https://zh-hans.reactjs.org/docs/reconciliation.html#motivation)。 React用`key`标记React元素。 # 关于`key`的描述 1. 必要； 2. 唯一； 3. 固定。 ## [必要](https://reactjs.org/docs/lists-and-keys.html#basic-list-component) >A “key” is a special string attribute you need to include when...

# 闭包 了解闭包，先了解[函数调用栈，执行上下文](https://github.com/yaofly2012/note/issues/188) ## 一、作用域 闭包概念太抽象了。先学习下作用域。控制着变量的可见性和生命周期。 ### 1. JS是基于词法作用域的，并且只有： - 全局作用域 - 函数作用域 ### 2. 变量声明提升： 函数作用域里所有的变量在函数体内都可以见的，JS引擎在编译代码时会把变量声明全部提前到函数体顶部。 ```js (function() { console.log(a) // undefined var a = 1; console.log(a) // 1...

# 练习 ## 1. [call 和 apply 的区别是什么，哪个性能更好一些](https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/84) 1. 都是调用函数，但是参数不同； - apply针对多个参数的case更方便些； - call则更直观，性能更好。优先使用`call`，多个参数也可利用解构赋值简化写法，可完全代替了`apply`。 2. 至于性能`cal`比`apply`更好些， [lodash源码](https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js) ```js /** * A faster alternative to `Function#apply`, this function invokes `func` *...

# 防抖和节流 # 一、防抖（debounce） 指定时间内，方法只能执行一次，多余的事件直接忽略掉（underscore, lodash库的debounce都是这样做的）。而这个时间的计算，是从最后一次触发监听事件开始算起。 比如： - 按关闭电梯门的按钮时，电梯并不会里面关门，而是等一等看看是否有人要上电梯（即操作要延迟执行）; - `resize`事件（如果只是看resize后最终的效果，可以利用debounce）; - 提交按钮防抖操作（一般操作需要立马执行）。 ## 1.2 基于概念实现： 实现`debounce`的关键点是如何计算delay时间（实现`throttle`的关键点也一样）。 ```js function debounce(cb, delay) { var timeoutId; return function debounced() { // 每次调用都清除上次的延迟，然后重新创建延迟...

# [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) # 一、[String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) ## 1.1 字符串[`length`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length) & 字符数量 **注意，注意，注意：字符的`length`属性表示的是字符串长度是以`UTF-16`码点为单位的（两个字节），并不是字符的数量**。 ```js console.log('A你Z'.length) // 4 ``` ### 原因： 在JS出生的时候，[Unicode](https://unicode-table.com/en/)编码规范最大只有两个字节（BMP字符），所以那个时候`length`也就是字符的数量。 ### 如何获取字符串的数量？ #### ES6方法 1. 利用字符串是可迭代对象 ```js // 展开操作符 console.log([...'A你Z'].length) // 3...