春招冲刺 12.251. cookie Cookie是指某些网站为了辨别用户身份而存储在用户本地终端上的数据（通常经过加

计算机网络

tcp与udp的区别

1、基于连接与无连接；

2、对系统资源的要求（TCP较多，UDP少）；

3、UDP程序结构较简单；

4、流模式与数据报模式；

5、TCP保证数据正确性，UDP可能丢包；

6、TCP保证数据顺序，UDP不保证。

设计模式

单例模式

保证一个类仅有一个实例，并提供一个访问它的全局访问点。

//实现思路
//用一个变量来标识当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例时，直接返回之前创建的对象
//函数的方法创建
function Person(){
    this.data = "person";
}
Person.getInstance = (function(){
    let instance;
    return function(){
        instance = instance ? instance:new Person;
        return instance;
    }
})();
let p1 = Person.getInstance();
let p2 = Person.getInstance();
console.log(p1 === p2); //true
//class的方法创建
class Person{
    constructor() { }
    static  getInstance() {
        if (!Person.instance) {
            Object.defineProperty(Person, "instance", {
                value: new Person()
            });
        }
        return Person.instance;
    }
}
let p1 = Person.getInstance();
let p2 = Person.getInstance();
console.log(p1 === p2); //true

浏览器

什么是回流与重绘？

浏览器会把获取的HTML代码解析成一个DOM树，html中的每一个元素都是DOM树的一个节点 , 根节点也就是我们常用的docunment对象　当渲染的时候遇到一部分或者全部因大小，隐藏，布局的等改变需要重新构建的时候，这时候就会发生回流，每个页面最少会发生一次回流也就是页面第一次加载，在回流的时候，浏览器会使渲染树中受到影响的部分元素失效，并重绘这个部分的渲染树，完成后，再重新绘制这部分受影响的部分，这个过程就是重绘当渲染树的一些元素需要更新属性的时候，而这些属性只会影响外观，风格，不影响布局就称为重绘

浏览器中存储数据的方案有哪几种主要有三种方式

1. cookie

Cookie是指某些网站为了辨别用户身份而存储在用户本地终端上的数据（通常经过加密）。Cookie是由服务器生成，客户端进行维护和存储。通过Cookie，可以让服务器知道请求是来源自哪个客户端并对客户端状态进行维护。比如登录后的刷新和跳转，请求头会携带登陆时候Response Header中的set-cookie属性，Web服务器在接收请求的时候就能读出Cookie中的值，根据Cookie中的值就可以判断和恢复一些用户的信息状态。


//添加 键值对 过期时间 cookie 的路径
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//修改
//覆盖旧的cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
//删除 
//设置过期时间为以前的时间
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
//读取
let x = document.cookie;

2. WebStorage

WebStorage是HTML5中新增的本地存储解决方案，包含了SessionStorage和LocalStorage两类

LocalStorage

特点

保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取之前保存的数据。
存储限制大小为5MB左右。
仅在客户端使用，不和服务端进行通信。

//添加 
localStorage.setItem(name,value)
//获取
localStorage.getItem(name,value)
//删除 
localStorage.removeItem(name)
//把json格式的数据存入时，会被自动转换成字符串，可以通过JSON.stringify(data)转换

SessionStorage

SessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据就会被清空特点

会话级别的浏览器存储。
存储大小限制为5MB左右。
仅在客户端使用，不与服务端进行通信

//方法
使用方法与localStorage类似

不同点

作用域的不同 LocalStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份LocalStorage数据。而SessionStorage则比LocalStorage要更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
生命周期的不同 LocalStorage是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而SessionStorage是临时性的本地存储，是会话级别的存储，当会话结束（页面被关闭）时，存储内容也会随之被释放。

Web Storage是一个从定义到使用都非常简单的东西。它使用键值对的形式进行存储，这种模式有点类似于对象，可是键值却只能存储字符串。如果想要得到对象，还需要先对字符串进行一轮解析。因此Web Storage可以看作是对Cookie的拓展，只能用于存储少量的简单数据。当遇到大规模的、结构复杂的数据时，就需要用到IndexedDB。

3. IndexedDB

indexedDB是一种低级的API，使用索引来实现对其间存储数据的高性能搜索，用于客户端需要存储大量结构化数据（包括文件和blobs）的场景。

特点

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

//使用 类似数据库的操作

阮一峰老师的教程： www.ruanyifeng.com/blog/2018/0…

三者的对比

CSS

雪花特效

<style>
		* {
			margin: 0;
			padding: 0;
		}

		.snow-container {
			position: absolute;
			height: 100%;
			width: 100%;
			max-width: 100%;
			top: 0;
			overflow: hidden;
			z-index: 2;
			pointer-events: none;
			background-color: black;
		}

		.snow {
			display: block;
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			pointer-events: none;
			transform: translate3d(0, -100%, 0);
			animation: snow linear infinite;
		}

		.snow.foreground {
			background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
			animation-duration: 15s;
		}

		.snow.foreground.layered {
			animation-delay: 7.5s;
		}

		.snow.middleground {
			background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
			animation-duration: 20s;
		}

		.snow.middleground.layered {
			animation-delay: 10s;
		}

		.snow.background {
			background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
			animation-duration: 30s;
		}

		.snow.background.layered {
			animation-delay: 15s;
		}

		@keyframes snow {
			0% {
				transform: translate3d(0, -100%, 0);
			}

			100% {
				transform: translate3d(15%, 100%, 0);
			}
		}
	</style>
    
 <div class="snow-container">
		<div class="snow foreground"></div>
		<div class="snow foreground layered"></div>
		<div class="snow middleground"></div>
		<div class="snow middleground layered"></div>
		<div class="snow background"></div>
		<div class="snow background layered"></div>
	</div>