Cookie
- 浏览器有一个安全策略，禁止浏览器自动读取本地文件，禁止跨域，
- 浏览器不能读取本地的文件，进行读取，操作；自动默认只能下载到
window的下载路径 cookie存储的必须是字符串cookie是一个临时的数据，浏览器彻底关闭后就会被删除cookie可以在同一个域下的文件直接互相共享cookie必须是web服务状态下打开的页面才有，本地直接打开无法使用cookie属性名相同的时候是覆盖的，仅能存储5K（5*1024字节）数据
document.cookie="a=1"
document.cookie="a=2"
- 表单提交/超链接跳转的时候也会携带
cookie，往返于服务器和客户端之间，必须客户端和服务端是同一个域下
- cookie也是有路径区分，父路径不能访问子路径下的cookie，子路径可以访问父路径下的内容;可以使用
path设置将子路径的cookie设置在跟中
document.cookie="age=30"
document.cookie="sex=男;path=/"
document.cookie="hobby=读书;path=./a"
console.log(document.cookie)
// 将得到的cookie转换成对象
function getCookie(){
return document.cookie.split(";").reduce((v,t)=>{
var arr=t.split("=");
v[arr[0].trim()]=arr[1];
return v;
},{})
}
如何长期存储cookie
var date=new Date();
document.cookie="a=1;expires="+date.toUTCString();
// expires 通过设置expires设置时间，可以设置cookie失效时间
- 谷歌只能存储到2024年，是因为谷歌执行了替换计划
webstorage
- localstorage ：永久存储，手动删除才会被删除，同域下所有位置共享数据，不区分文件夹路径，存储大小为5M；不会主动携带往返于服务器之间
- sessionStorage：临时存储，同文件不同窗口下都不共享数据，关闭浏览器会自动销毁，存储大小为5M，也不会主动携带往返于服务器之间
- localstorage.length 存储的多少数据
- localstorage.setItem("user","zhangsan") 或者 localstorage.user="zhangsan"
存储数据- localstorage.user 或者 localstorage.getItem("user")
获取数据- localstorage.removeItem 或者 delete localstorage.user
删除数据- localstorage.clear
清除所有
localStorage.user="zhangsan" 与 sessionStorage.user="zhangsan" 的两者区别
localstorage
- token
- 存储较小共有库
- 事件触发
webstorage
- 事件监听改变页面中传送数据
promise
- 对于面向过程的程序员进行开发，解决了回调地狱的问题
多线程，多进程，集群
多进程：双开
多线程：一个应用同时运行多个内容
集群：通过升级的服务器来进行存储
云：将大家的服务器都进行存储
异步的代码 面向过程的代码iu是一条直线
async与await
- resolve 参数是一个回调函数 当异步执行成功后可以执行resolve，表示执行成功
- reject 参数是一个回调函数 当异步执行失败后可以执行reject，表示执行失败
链式结构
var arr=[];
getImage("./img/110101.jpg")
.then(function(img){
arr.push(img);
return getImage("./img/110102.jpg");
}).then(function(img){
arr.push(img);
return getImage("./img/110103.jpg");
}).then(function(img){
arr.push(img);
console.log(arr)
})
// 如果有两个函数，则一个是成功，另外一个是失败执行的函数
getImage("./img/110101.jpg").then(function(){
console.log("成功")
},function(){
console.log("失败")
})
- 典型的回调地狱
var img = new Image();
img.src = "./img/110101.jpg";
img.onload = function () {
arr.push(img);
var img = new Image();
img.src = "./img/110102.jpg";
img.onload = function () {
arr.push(img);
var img = new Image();
img.src = "./img/110103.jpg";
img.onload = function () {
arr.push(img);
}
img.onerror = function () {
reject("错误的地址")
}
}
img.onerror = function () {
reject("错误的地址")
}
}
img.onerror = function () {
reject("错误的地址")
}
try...catch
try{
// 尝试执行，如果正确执行完成后执行finally，如果执行错误执行catch，然后在执行finally
}catch(e){
// 只有在try执行错误时才会执行这里
}finally{
// 任何时候最后都会执行finally
}
var a=1;
try{
a++;
a+=b; // b不存在报错，
a*=2;
}catch(e){
a++;
}finally{
a++;
}
console.log(a) // 4
var a=1;
var b=2;
try{
a++;
a+=b;
a*=2;
}catch(e){
a++;
}finally{
a++;
}
console.log(a)
try{
getImage("./img/110234.jpg").then(function(img){
console.log(img)
})
}catch(e){
console.log("aaaaa")
}
- Promise使用自身的catch做检查
promise的静态方法
resolve
- Promise.resolve() 返回一个Promise 两者相同
// Promise.resolve() 返回一个Promise
Promise.resolve().then(function(){
console.log("aaa")
})
// Promise.resolve()相当于下面的函数
function fn(){
return new Promise(function(resolve,reject){
resolve();
})
}
reject
- Promise.reject()方法返回一个带有拒绝原因的
Promise对象。 两者相同
Promise.reject().catch(function(){
})
function fn(){
return new Promise(function(resolve,reject){
reject();
})
}
all
典型案例 -- 异步过程中加载数据
- 同时让多个异步去执行，并不是一个完成了在完成第二个，不是顺序的，而是
并行的
function getImage(src) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.src = src;
img.onload = function () {
// 只能传一个参数
resolve(img);
}
img.onerror = function () {
reject("错误的地址")
}
})
}
var arr=Array(3).fill(1).map((n,i)=>getImage(`./img/11010${i+1}.jpg`));
// 按Promise数组的顺序完成所有异步过程，然后将每个返回的结果放在一个新数组中，并且返回这个新数组
Promise.all(arr).then(function(list){
console.log(list);
})
rece
- 返回一个数据，根据执行的速度返回
function getImage(src) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.src = src;
img.onload = function () {
// 只能传一个参数
resolve(img);
}
img.onerror = function () {
reject("错误的地址")
}
})
}
var arr=Array(3).fill(1).map((n,i)=>getImage(`./img/11010${i+1}.jpg`));
// 给入一个异步的Promise的数组，谁先完成异步过程，返回这个先完成的数据
Promise.race(arr).then(function(img){
console.log(img)
})
通过promise实现红绿灯
function showlight(light, time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(light);
resolve();
}, time)
})
}
function fn() {
showlight("红灯", 2000).then(function () {
return showlight("黄灯", 1000)
}).then(function () {
return showlight("绿灯", 2000)
}).then(function () {
fn()
})
}
fn();
