【无标题】

weixin_43883748

已于 2023-09-25 20:30:44 修改

阅读量33

点赞数

文章标签： javascript

于 2023-09-23 15:17:22 首次发布

本文链接：https://blog.csdn.net/weixin_43883748/article/details/133157986

版权

本文详细介绍了Cookie的概念、在Web应用中的会话跟踪、增删查改操作，以及与localStorage、sessionStorage的区别。同时涵盖了Vue数据驱动原理和懒加载/瀑布流在性能优化中的应用。

摘要由CSDN通过智能技术生成

cookie概念

会话跟踪技术
会话session：一个webbapp由打开到完全关闭的过程。本质类似于一个变量
作用:
1、可以实现会话中的数据共享传递（跨页面间的传值）
2、用户免登录

cookie
增删查改 crud

cookie的增删查改

写->增改
document.cookie = “键=值”；
document.cookie = “name=laowang”;

读：cookie读出来的是用分号+空格，分开的字符串键值对

document.cookie = "name=laowang";
  document.cookie = "name=kunkun";
  document.cookie = "pwd=123;"
  let strCookie = document.cookie;
  let arrCoolie = strCookie.split("; ");
   for(let i=0;i<arrCookie.length;i++){
    let item = arrCookie[i].split("=");
    console.log(item[0],item[1]);
    }

跳转

a.html(点击页面)

<body>
<button>跳转</button>
</body>
<script>
	let oBtn =  document.querSelector("button");
	oBtn.onclick = function(){
		document.cookie = "name=lll";
		document.cookie = "pwd=1123";
		location.href = "需跳转的网页"；
	}
</script>

b.html（跳转页面）

<script>
	console.log(document.cookie);
</script>

cookie的生命周期

cookie的生命周期
a.会话级别->只能在会话期间使用
document.cookie = “键=值”;
b.长生命周期
document.cookie = “键=值;expires=标准日期对象”;

let date = new Date();
    date.setDate(date.getDate()+10);
    //方法一
 		// document.cookie = "userName=xiaoming;expires="+date;
 	//方法二
			document.cookie = `userName=xiaoming;expires=${date}`;

cookie的删除

删除指针于长生命周期：cookie没有直接删除的方式，只能侧面删除
a.将key对应的value设置为’ ’
b.将expires设置为-1

 let date = new Date();
    date.setDate(date.getDate()+10);
    document.cookie = `name=xiaoming;expires=${date}`;
    document.cookie = `name='';expires=-1`;

cookie的封装（查、增改、删）

// 查
    // params:
    // key 用户传递的key值
    // returnValue:
    // 根据key对应的value
    function getCookie(key){
        let strCookie = document.cookie;
        let arrCookie = strCookie.split("; ");
        for(let i=0; i<arrCookie.length; i++){
            let item = arrCookie[i].split("=");
            if(key == item[0]){
                return item[1];
            }
        }
        return "";
    }
    // let str = getCookie("name");
    // console.log(str);
    // console.log(getCookie("pwd"));
    
    // 增改
	    // params:
	    // key
	    // value
	    // day:可以缺省，代表生命周期保存的天数
    function setCookie(key,value,day){
        if(day == undefined){
            document.cookie = `${key}=${value}`;
        }else{
            let date = new Date();
            date.setDate(date.getDate()+day);
            document.cookie = `${key}=${value};expires=${date}`;
        }
    }
    // setCookie("userName","caixunkun");
    // setCookie("userPwd","123456",7);

 // 删
	    // params
	    // key
    function delCookie(key){
        setCookie(key,"",-1);
    }

    delCookie("userPwd");

web存储的增删查改

cookie和localStorage和sessionStorge的区别

Cookie：
数据的生命周期：一般由服务器生成，可设置失效时间（长生命周期）。如果在浏览器端生成Cookie，默认是关闭浏览器后失效（会话级别）
存储数据大小：4k左右
与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
易用性：需要程序员自己封装，源生的Cookie接口不友好

localStorage：
数据的生命周期：除非被清除，否则永久保存
存储数据大小：一般为5mb
与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器通信
易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

sessionStorage：
数据的生命周期：仅在当前会话下有效，关闭页面或浏览器后被清除
存储数据大小：一般为5mb
与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器通信
易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
在这里插入图片描述

1、增改（三种方法）
方法一、官方方法 setItem(key,value);
长保存 localStorage.setItem(“name”,“laowang”);
会话
sessionStorage.setItem(“pwd”,“1234”);
方法二、点运算
localStorage.id = 9527;
方法三、下标法
localStorage[“gender”] = ‘M’;

2、查
a.getItem(key):返回对应的value
console.log(localStorage.getItem(“name”));
b.点运算符
console.log(localStorage.id);
c.下标法
console.log(localStorage[“gender”]);

3、删
方法一、
localStorage.removeItem(“name”);
方法二、
localStorage.clear();

4、遍历
length
key(index)

for(let i=0; i<localStorage.length; i++){
    console.log(localStorage.key(i));
}
localStorage.setItem("data", '{"name":"laowang","age":1800}');
let str = localStorage.getItem("data");
console.log(str);
let json = JSON.parse(str);
console.log(json);

Object.definePorperty(为对象添加属性)

第一种用法（不用）

let data = {
        age:18,
        hobby:"军训"
    }
    // data.name = "老王";
    //功能:为对象添加属性
    // Object.defineProperty("对象名","属性名",修饰符);
    Object.defineProperty(data,"name",{
        value:"张三",
        writable:true,//该属性是否可以被修改
        enumerable:true,//是否可以被枚举
        configurable:true//是否可以被删除
    });
    data.name = "老六";
    delete data.age;
    delete data.name;
    console.log(data);
    // for(let index in  data){
    //     console.log(index);
    // }

第二种语法（数据的劫持（钩子函数））
钩子函数->在某种特定行为系统自动调用的函数，但凡出现自定义属性进行写操作时，就触发
// Object.defineProperty(“对象名”,“属性名”,修饰符);

let data = {
}
//数据的劫持（拦截）
Object.defineProperty(data,"name",{
		//写的时候触发钩子函数
		//为了避免递归加_
		set:function(value){
				this._name = value;
				console.log("set");
		}
		//读的时候触发
		get:function(value){
				console.log("get");
				return this._name;
		}
});

data.name = "laoliu";
console.log(data.name);

带判断的写法

Object.defineProperty(data,"age",{
        set:function(value){
            if(value>0){
                this._age = value;
            }else{
                console.log("参数必须大于0");
                this._age = 1;
            }
            console.log("set");
        },
        get:function(){
            console.log("get");
            return this._age;
        }
    });
    data.age = -1;
    console.log(data.age);

vue2数据驱动原理

	对象的回调函数

vue3的proxy

//proxy:代理对象，vue3的数据驱动原理
let data = {
name:“laoliu”,
age:18,
fun:function(){
console.log(this);
}
}
// let proxy = new Proxy(目标对象,修饰符);
let proxy = new Proxy(data,{
// set:function(目标对象,属性名,属性值){
// }
set:function(target,property,value){
console.log(“set”);
target[property] = value;
},
// get:function(目标对象,属性名){
// }
get:function(target,property){
console.log(“get”);
return target[property];
}
});
// data.name = “周饼伦”;
// console.log(data.name);
// proxy.name = “周饼伦”;
// console.log(proxy.name);

vue3和vue2区别

// 为什么用Proxy代替Object.defineProperty？
// Vue2.X通过Object.defineProperty()来劫持各个属性的setter，getter，
// 新版本通过Proxy劫持属性
// Proxy优势支持数组，其实还不止
// Object.defineProperty() 的问题主要有三个：
// a.不能监听数组的变化
// b.必须遍历对象的每个属性
// c.必须深层遍历嵌套的对象

hasOwnProperty

// hasOwnProperty:用来判断属性是不是自身的属性
// 对象.hasOwnProperty(属性名):返回布尔值
Object.prototype.a = 123;
// let arr = [6,6,6];
// console.log(arr.a);
// console.log(arr.hasOwnProperty(“a”));
// console.log(arr.hasOwnProperty(“length”));
let data = {
b:456
}
for(let index in data){
if(data.hasOwnProperty(index)){
console.log(index);
}
}

瀑布流

懒加载

什么是懒加载:
懒加载其实就是延迟加载，是一种对网页性能优化的方式，
比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。
什么时候用懒加载:
当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。(瀑布流)
懒加载的原理:
1.一旦src赋值url地址，则请求就发送了
2.如果src没有被赋值url地址，就不会发送请求
3.先将所有的src的地址存储在对应元素的自定义属性，my_src
4.判断元素是否进入可视区域，等元素进入可视区域，再把my_src的值赋给src
元素.offsetTop < 可视窗口高度 + 滚动条高度

weixin_43883748

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

数据的生命周期：一般由服务器生成，可设置失效时间（长生命周期）。expires=标准日期对象”;易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。易用性：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器通信。与服务器端通信：仅在客户端（即浏览器）中保存，不参与和服务器通信。数据的生命周期：仅在当前会话下有效，关闭页面或浏览器后被清除。读：cookie读出来的是用分号+空格，分开的字符串键值对。
复制链接

扫一扫