JavaScript的cookie
cookie是用来储存web页面的用户信息
由于http是一种无状态的协议,服务器单从网页链接上是无法获取用户信息的。这个时候服务器会给用户端(浏览器)颁发一个cookie,用来确认用户信息。
cookie获取方式
documen.cookie=“name=value;domain=.domain.com;path=/;expires=;”
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的封装
封装:
1.相同的地方不做处理
2.不同的部分使用参数表示
- function setCookie(name,value,time){
var oDate=new Date();
oDate.setDate(oDate.getDate()+time);
document.cookie=${name}=${value};expires=${oDate}
}
setCookie(“name”,“孙悟空”;30);
setCookie(“name2”,“猪八戒”;20);
setCookie(“name3”,“沙僧”,10);
- function getCookie(key)={
var arr=document.cookie.split("; ")
for(var i=0;i<arr.length;i++){
var arrItem=arr[i].split(“=”);
if(arrItem[0]==key){
console.log(arrItem[1])
}
}
}
- 删除 设置失效时间为之前的时间即可删除指定项
function removeCookie(key){
setCookie(key,“”,-1)
}
- 清空
function clearCookie(){
var arr=document.cookie.split(“; “);
for(var i=0;i<arr.legth;i++){
var arrItem=arr[i].split(”=”);
setCookie(arrItem[0],“”,-1)
}
}
sessionStorage 会话缓存
缓存时间为当前tab页面浏览器打开期间 关闭浏览器就清除
属性
-
length 缓存数据的条数
设置 sessionStorage.setItem(“key”,“value”);
例: aBtns[0].οnclick=function(){
sessionStroage.setItem(“name”,“孙悟空”)
} -
获取 sessionStorage.getItem(“key”)
例: aBtns[1].οnclick=function(){
console.log(sessionStroage.getItem(“name”))
} -
删除 sessionStroage.removeItem(“key”)
例:oBtns[2].οnclick=function(){
sessionStroage.removeItem(“name”)
} -
清空 sessionStroage.clear()
例:oBtns[3].οnclick=function(){
sessionStroage.clear()
}
localStroage 本地缓存
缓存时间为永久除非手动删除
属性
-
length 缓存数据的条数
-
设置 localStroage.setItem(“key”,“value”)
例:aBtns[0].οnclick=function(){
localStroage.setItem(“name”,“孙悟空”)
} -
获取 localStroage.getItem(“key”)
例:aBtns[1].οnclick=function(){
localStroage.getItem(“name”)
} -
删除 localStroage.removeItem(“key”)
例:aBtn[2].οnclick=function(){
localStroage.removeItem(“name”)
} -
清空 localStroage.clear()
例: aBtns[3].οnclick=function(){
localStroage.clear()
}
全局属性和方法
属性
-
Infinity 代表正的无穷大的数值
-
NaN 表示某个值不是一个数字 Not a Number
-
undefined 指未定义的值
全局方法
-
eval() 计算JavaScript字符串,并把它作为脚本代码执行
-
decodeURI() 解码某个编码的URL
-
encodeURI() 将字符串编码为URL
-
decodeURIComponent() 解码一个编码的URI组件
-
encodeURIComponent() 把字符串编码为URI组件
-
escape() 对字符串进行编码
-
unescape()对由escape()编码的字符串进行解码
-
isFinite() 检查某个值是否为有穷大的数
isNaN() 检查某个值是否不是一个数字 -
Number()把对象的值转换为数字
-
parseFloat 解析一个字符串并返回一个浮点数(小数)
-
parseInt() 解析一个字符串并返回一个整数
String() 字符串
JavaScript的console对象
log() 控制台输出一条日志
info() 控制台输出一条信息
warn(name,message) 输出警告信息,信息前面加一个黄色三角表示警告
error(name,message) 输出错误信息到控制台,信息前面加一个红色X表示错误
clear()清空控制台信息
time() 计时器开始计时 与timeEnd()联合使用,用于计算初一个操作花费的准确时间
timeEnd() 计时结束
count()记录count()调用的次数,一般用于计数
table() 以表格形式显示数据
group()控制台创建一个信息分组.一个完整的信息分组以console.group()开始,console.groupEnd()结束
groupCollapsed() 在控制台创建一个信息分组。类似console.group(),但它默认是折叠的
groupEnd() 设置当前信息分组结束
console.group()分组开始默认展开
assert(“判断语句”,“判断条件不成立输出内容”) 如果断言为false,则在控制台输出错误信息
trace() 显示当前执行的代码在堆栈中调用的路径。
JavaScript中的undefined和null的区别
undefined和null在js都表示"无"
null是一个表示"无"的对象,转换为数值为0
undefined是一个表示"无"的初始值,转换为数值为NaN
-
null的用法
1.作为函数的参考,表示该函数的参数不是对象
2.作为对象圆型链的终点
3.清空变量 -
undefined的用法
1.变量被申明了,但是没有赋值时,返回undefined
2.调用函数时,应该提供参数但是没有提供,该参数为undefined
3.对象没有赋值的属性,该属性值为undefined
4.函数没有返回值时,默认返回undefined
JavaScript中void关键字
Javascirpt:void(0)中最关键的是void关键字,void是JavaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值
语法
javascript:void func()
javascript:void(func())
JavaScript中的debugger
debug:调试
如何在js代码中手动造成/添加一个断点效果?
用debugger
if(true){
debugger;
}
for(var i=0;i<10;i++){
debugger;
console.log(i)
}