01 时间对象 Date( )

1、语法

var timer = new Date( );

<script> 
    var timer = new Date() // 默认获取到当前时间 
    console.log(timer) 
    
    var timer1 = new Date('2022-11-1 12:13:14') // 获取到指定时间 
    console.log(timer1) 
</script>

2、时间对象的参数

时间对象接收参数有两种格式：

【1】数字

注意：（1）月份上，0 ---- 1月 1 ---- 2月 2 ---- 3月 …… 11 ---- 12月（2）有进位

<script> 
    var timer = new Date(2008, 00, 20, 12, 13, 14) // 参数顺序为 年 - 月 - 日 时 - 分 - 秒 
</script>

【2】字符串

<script> 
    var timer = new Date('2008-01-20 13:14:15') // 年-月-日 时:分:秒 console.log(timer) 
</script>

3、格式化时间对象

<Script> 
    var timer = new Date() // 获取当前时间 
    // console.log(timer) var year = timer.getFullYear(); //获取年 
    console.log(year); var month = timer.getMonth(); //获取月 
    console.log(month); var date = timer.getDate(); //获取日 （就是一个月中的第几天） console.log(date); 
    var day = timer.getDay(); //获取周中的天（就是每周的第几天） 
    console.log(day); 
    var hours = timer.getHours(); //获取时 
    console.log(hours); 
    var minutes = timer.getMinutes(); //获取分 
    console.log(minutes); 
    var seconds = timer.getSeconds(); //获取秒 console.log(seconds); 
</script>

4、获取格林尼治时间

格林尼治时间：即1970年1月1号0时0分0秒，到目前时间的毫秒数

5、设置时间对象

<Script> var timer = new Date() // 获取当前时间 // console.log(timer) timer.setFullyear(2018); //设置年 var year = timer.getFullYear(); //获取年 console.log(year); timer.setMonth(2); //设置月 var month = timer.getMonth(); //获取月 console.log(month); timer.setDate(18); //设置日 var date = timer.getDate(); //获取日 （就是一个月中的第几天） console.log(date); //timer.setDay(18); //没有这种写法 //var day = timer.getDay(); //获取周中的天（就是每周的第几天） //console.log(day); timer.setHours(18); //设置时 var hours = timer.getHours(); //获取时 console.log(hours); timer.setMinutes(20); //设置日 var minutes = timer.getMinutes(); //获取分 console.log(minutes); timer.setSeconds(18); //设置秒 var seconds = timer.getSeconds(); //获取秒 console.log(seconds); timer.setMilliseconds(18); //设置毫秒 var milliseconds = timer.getMilliseconds(); //获取秒 console.log(milliseconds); timer.setTime(1234567890); //设置距离1970的总毫秒 console.log(timer.getTime()); </script>

02 BOM(浏览器对象模型)基础

操作方法：

BOM的操作方法.png

03 本地存储

1、localStorage ---- 浏览器的本地存储(永久存储), 打开浏览器存储上之后, 关闭浏览器, 信息还在

【1】存储语法

window.localStorage.setItem(key, value); 注意：value必须是字符串类型的值

【2】删除语法

window.localStorage.removeItem(key);

window.localStorage.clear();

【3】获取语法

window.localStorage.getItem(key);

2、sessionStorage ---- 浏览器的临时存储

特点: 页面关闭直接清除数据

【1】存储语法

window.sessionStorage.setItem(key, value); 注意：value必须是字符串类型的值

【2】删除语法

window.sessionStorage.removeItem(key);

window.sessionStorage.clear();

【3】获取语法

window.sessionStorage.getItem(key);

【4】JSON的两个方法

4.1 JSON.stringify( )

4.2 JSON.parse

var obj = [1, 2, 3, 4, 5]; 
// 方法1： JSON.stringify() 将其他类型的数据，转为字符串格式 window.sessionStorage.setItem('OBJ', JSON.stringify(obj)); 
// 方法2： JSON.parse var newObj = JSON.parse(window.sessionStorage.getItem('OBJ')); console.log(newObj);

3、cookie

cookie只能在服务器启动的页面中正常使用-----solve----vscode安装live Server

语法形式： document.cookie = 'key = value';

①设置一条cookie

document.cookie = 'QQ = 123456';

②设置多条

document.cookie = 'weixin = 0989097';

document.cookie = 'weibo = 1236789456';

document.cookie = 'xxiao = 123 ccfgg = 456'; //不可以这样设置，这样设置解析的结果是把xxiao当做key 把123 ccfgg = 456当做了value

③设置一条带有过期时间的cookie

// 1、设置一条 document.cookie = 'key = value'; // 2、设置多条 // document.cookie = 'xxiao = 123 ccfgg = 456'; //不可以这样设置，这样设置解析的结果是吧xxiao当做key 把123 ccfgg = 456当做了value document.cookie = 'xxiao = 123'; document.cookie = 'ccfgg = 456'; // 3、设置一条带有过期时间的cookie // var timer = new Date(); // document.cookie = 'vx = 12356;expires=' + timer; var timer = new Date(); // timer.setTime(timer.getTime() - 8 * 60 * 60 * 1000 + 20 * 1000); // document.cookie = 'vx = 12356;expires=' + timer; console.log(document.cookie);

4、本地存储之间的区别

【1】cookie与storage的区别

出现时间：cookie有js时就有了，storage是在有了H5时才产生的

存储大小：cookie ---- 4kb storage ---- 20MB

前后端交互：cookie ----- 交互时请求默认携带cookie storage ----- 交互时请求不会携带，除非前端人员配置传递

前后端操作：cookie ----- 无论前后端语言都可以操作 storage ----- 只能由前端语言来操作（js）

过期时间：cookie ----- 默认会话级别，页面关闭，存储消失；可以通过手动配置过期时间

storage ----- 不能通过手动配置

【2】localStorage与sessionStorage的区别

过期时间：

localStorage:永久存储，除非手动清除

sessionStorage:临时存储，会话级别，关闭页面，存储就失效

【十】时间对象、BOM基础、本地存储