JavaScript的cookie
- cookie是用来储存web页面的用户信息。
- 由于HTTP是一种无状态的协议,服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端(浏览器)颁发一个cookie,用来确认用户的信息。
1. 获取 document.cookie console.log(document.cookie);
2. 设置
document.cookie="name=value;domain=.domain.com;path=/;expires=;"
document.cookie="name=张三";
document.cookie="age=20";
2.1 设置有效期
document.cookie="name=张三;expires=Mon May 09 2022 10:32:51";
2.2设置之前的时间 删除
document.cookie="name=张三;expires=Mon May 08 2022 10:32:51";
· name:一个唯一确定的cookie名称。通常cookie名称不区分大小写
· value:存储在cookie中的字符串值。最好为cookie的name和value进行url编码
· domain:cookie对哪个域是有效的 域名 www.baidu.com
· path:表示这个cookie影响到的路径,浏览器会根据这个配置项,向指定的域中匹配的路径发送cookie
· expires:失效时间 表示cookie何时被删除(停止向服务器发送cookie) 时间值是GMT格式的 设置过去的时间,直接删除 默认为会话缓存(关闭浏览器删除)
· max-age:与expires效果相同 max-age优先级高于expires
· httpOnly:告知浏览器不允许通过脚本document.cookie去更改这个值,同样这个值在document.cookie中也不可见。但在http请求者仍然会携带这个cookie。注意这个值虽然在脚本中不可获取,但仍然在浏览器安装目录中以文件形式存在。这项设置通常在服务器端设置。
· secure:安全标志,指定后,只有在使用SSL链接时才能发送到服务器,如果是http链接则不会
cookie的方法封装
- cookie是用来储存web页面的用户信息。
- 由于HTTP是一种无状态的协议,服务器单从网络链接上是无法知道客户信息的。这个时候服务器会给客户端(浏览器)颁发一个cookie,用来确认用户的信息。
- 封装
①.相同部分 不做处理
②.不同部分 使用参数表示
1. 获取 document.cookie
console.log(document.cookie);
function getCookie(key) {
// age=20; name2=猪八戒; name3=沙僧; name=孙悟空
1.1 转换为数组
var arr = document.cookie.split("; ");
// console.log(arr);
1.2 将arr进行遍历
for (var i = 0; i < arr.length; i++) {
// console.log(arr[i])
// if(arr[i].match(key)!=null)
// if(arr[i].search(key)!=-1){
// console.log(arr[i].substring(arr[i].indexOf("=")+1))
// }
var arrItem = arr[i].split("=");
// console.log(arrItem);
if (arrItem[0] == key) {
console.log(arrItem[1])
}
}
}
// getCookie("name2");
2. 设置
// document.cookie="name=value;expires=time";
function setCookie(name, value, time) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + time); //设置过去时间 以天计数
// document.cookie=name+"="+value+";expires="+time;
document.cookie = `${name}=${value};expires=${oDate}`;
}
setCookie("name", "孙悟空", 30);
setCookie("name2", "猪八戒", 20);
setCookie("name3", "沙僧", 10);
3. 删除 设置失效时间为之前的时间
function removeCookie(key) {
setCookie(key,"",-1)
}
4. 清空
function clearCookie(){
var arr = document.cookie.split("; ");
for(var i=0;i<arr.length;i++){
var arrItem = arr[i].split("=");
setCookie(arrItem[0],"",-1)
// console.log(arrItem)
}
}
sessionStorage 会话缓存
缓存时间为当前tab页面浏览器打开期间 关闭清除
window.sessionStorage 对象
1. 属性
length 缓存数据的条数
console.log(window.sessionStorage.length);
var aBtns=document.getElementsByTagName("button");
1.1 设置 sessionStorage.setItem("key","value");
aBtns[0].onclick=function(){
sessionStorage.setItem("name","孙悟空");
}
1.2 获取 sessionStorage.getItem("key")
aBtns[1].onclick=function(){
console.log(sessionStorage.getItem("name"))
}
1.3 删除 sessionStorage.removeItem("key")
aBtns[2].onclick=function(){
sessionStorage.removeItem("name")
}
1.4 清空 sessionStorage.clear()
aBtns[3].onclick=function(){
sessionStorage.clear()
}
localStorage 本地缓存
缓存时间为永久 除非手动删除
window.localStorage 对象
1. 属性
length 缓存数据的条数
console.log(window.localStorage.length);
var aBtns=document.getElementsByTagName("button");
1.1 设置 localStorage.setItem("key","value");
aBtns[0].onclick=function(){
localStorage.setItem("name","孙悟空");
}
1.2 获取 localStorage.getItem("key")
aBtns[1].onclick=function(){
console.log(localStorage.getItem("name"))
}
1.3 删除 localStorage.removeItem("key")
aBtns[2].onclick=function(){
localStorage.removeItem("name")
}
1.4 清空 localStorage.clear()
aBtns[3].onclick=function(){
localStorage.clear()
}
补充
JavaScript全局属性和方法
1. 属性
1.1 Infinity 代表正的无穷大的数值
console.log(window.Infinity);
console.log(Number.POSITIVE_INFINITY);
console.log(3/0);
console.log(-1/0);
1.2 NaN 指示某个值 不是一个数字 Not a Number
console.log(window.NaN);
console.log(typeof window.NaN);
console.log(NaN==NaN);//false
1.3 undefined 指未定义的值
console.log(window.undefined);
var a;
console.log(a);
2. 全局方法
2.1 eval() 计算JavaScript字符串,并把它作为脚本代码执行
console.log(window.eval("1"+"1"));
var url="file:///D:/%E8%AF%BE%E7%A8%8B/web21/JavaScript/BOM/%E8%A1%A5%E5%85%85/01.JavaScript%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95.html";
2.2 decodeURI() 解码某个编码的URL
console.log(decodeURI(url));
encodeURI() 将字符串编码为URI
console.log(encodeURI("统一台湾"));
console.log(decodeURI(encodeURI("统一台湾")));
document.cookie="name="+encodeURI("张三");
2.3 decodeURIComponent() 解码一个编码的URI组件
encodeURIComponent() 把字符串编码为URI组件
2.4 escape() 对字符串进行编码
console.log(escape("统一台湾"));
unescape() 对由escape()编码的字符串进行解码
console.log(unescape(escape("统一台湾")));
2.5 isFinite() 检查某个值是否为有穷大的数
console.log(isFinite(1));
console.log(isFinite(1/0));
console.log(Number.isFinite(1));
2.6 isNaN() 检查某个值 是否不是一个数字
console.log(isNaN(10));
console.log(Number.isNaN(NaN));//true
2.8 Number() 把对象的值转换为数字
console.log(Number("100"));
parseFloat()
parseInt()
String()
JavaScript的console对象
console.log(window.console);
log() 控制台输出一条日志
console.log("打印日志");
info() 控制台输出一条信息
console.info("打印信息");
1. warn(name,message) 输出警告信息,信息前面加一个黄色三角,表示警告
console.warn("警告","有人睡着了");
2. error(name,message) 输出错误信息到控制台,信息前面加一个红色X 表示错误
console.error("错误","开始做俯卧撑");
3. clear() 清空控制台信息
console.clear();
4. time() 计时器,开始计时 与timeEnd()联合使用,用于算出一个操作花费的准确时间
timeEnd() 计时结束
console.time();
for(var i=0;i<100;i++){
}
console.timeEnd();
5. count() 记录 count() 调用的次数,一般用于计数
for(var i=0;i<10;i++){
console.count("计数");
}
6. table() 以表格形式显示数据
var arr=["孙悟空","猪八戒","沙和尚"];
console.table(arr);
var person={
name:"孙悟空",
age:500
}
console.table(person);
7. group() 在控制台创建一个信息分组。 一个完整的信息分组以 console.group() 开始,console.groupEnd() 结束
groupCollapsed() 在控制台创建一个信息分组。 类似 console.group() ,但它默认是折叠的。
groupEnd() 设置当前信息分组结束
console.group();//分组开始 默认展开
console.groupCollapsed();
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.groupEnd();
9. assert("判断语句","判断条件不成立输出内容") 如果断言为false,则在控制台输出错误信息
console.assert(10>12,"10<12");
10. trace() 显示当前执行的代码在栈堆中调用的路径。
function a(){
b();
}
function b(){
console.trace();
}
a();
JavaScript中undefined和null的区别
undefined null 在js中都表示 “无”
var a=null;
var a=undefined;
if(!null){
console.log("is not null")
}
if(!undefined){
console.log("is not undefined")
}
console.log(null==undefined);//true
console.log(Number(null));//0
console.log(Number(undefined));//NaN
1. ①null是一个表示“无”的对象,转换为数值为0
②undefined是一个表示“无”的初始值,转换为数值为NaN
2.null的用于
①.作为函数的参数,表示改函数的参数不是对象
②.作为对象原型链的终点
③.清空变量
3. undefined的用法
①.变量被声明了,但是没有赋值时,返回 undefined
②.调用函数时,应该提供参数但是没有提供,该参数为undefined
③.对象没有赋值的属性,该属性值为undefined
④.函数没有返回值时,默认返回undefined
function func(a){
console.log(a)
}
func();
var person={
name:"张三"
}
console.log(person.age)
function b(){
// return 10
}
console.log(b());
JavaScript的void关键字
javascript:void(0) 中最关键的是 void 关键字, void是JavaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值
语法:
// javascript:void func()
javascript:void(func())
JavaScript中的debugger
1.debug 调试
for(var i=0;i<10;i++){
console.log(i)
}
2.如何在js代码中手动造成/添加一个断点效果?
debugger
if(true){
debugger;
}
for(var i=0;i<10;i++){
debugger;
console.log(i)
}