定时器
<!-- <button onclick="clearfn()">清除定时器</button> -->
<div id="guangao" style="display:block;width: 200px;height: 200px;background-color: aqua;">
<h1>广告</h1>
</div>
<script>
/* 过3秒钟 把这个广告显示出来 */
/* document.getElementById('guangao').style.display = 'block' */
// setTimeout(function(){
// document.getElementById('guangao').style.display = 'none'
// },3000)
/* 过个一段时间去做一件事 */
/* 定时器 */
/* 定时器会返回一个唯一的id */
// let id = setInterval(function(){
// console.log('我爱js<br>');
// console.log(id);
// },1000)
// /* 根据定时器返回的唯一的id 来清除定时器 */
// function clearfn(){
// clearInterval(id)
// }
/* 过一秒钟 在控制台上打印出 一个数字 比如1
再过一秒钟 打印出2 ....
点击清除定时器 终止打印 */
// let i = 0;
// let id = setInterval(function () {
// i++;
// console.log(i);
// }, 1000)
// function clearfn() {
// clearInterval(id)
// }
/* setTimeout 和 setInterval的区别是
setTimeout只执行一次 */
/* 也会产生一个唯一的id标识 */
/* let id = setTimeout(function (){
console.log('我说冷笑话');
},1000) */
</script>
</body>
缓存
<!-- <button onclick="fn1()">设置sessionStorage</button>
<button onclick="fn2()">显示sessionStorage中name的值</button> -->
<button onclick="fn1()">设置localStorage</button>
<button onclick="fn2()">显示localStorage的值</button>
<script>
/* sessionStorage 存储之后 页面刷新 缓存的值不会消失
但是 把tab页 或者叫 会话 关闭之后，缓存的值就不存在了 */
// function fn1(){
// /* setItem设置 存储 */
// /* sessionStorage.setItem('name','zhangsan') */
// sessionStorage.name = 'zhangsan';
// }
// function fn2(){
// /* getItem获取 */
// // let v = sessionStorage.getItem('name');
// // document.write(v);
// document.write(sessionStorage.name);
// }
/* 设置和取值 使用两种方式都试一下 */
/* 点击按钮 设置一个学生信息 学号 stuNo 语文成绩 chinese
存到sessionStorage缓存中，再点击按钮 可以在页面显示出学生的学号
和语文成绩 ，最后把tab关闭，再次打开页面看值之后还存在 */
// function fn1(){
// // sessionStorage.stuNo = '1908'
// // sessionStorage.chinese = '90'
// sessionStorage.setItem('stuNo','1099')
// sessionStorage.setItem('chinese','80')
// }
// function fn2(){
// // document.write(sessionStorage.stuNo);
// // document.write(sessionStorage.chinese);
// document.write(sessionStorage.getItem('stuNo'));
// document.write(sessionStorage.getItem('chinese'));
// }
/* localStorage会一致存储在本地，会话或者tab页关闭也不会消失 */
/* localStorage是和地址有关系的，地址改变了，localStorage里面的值就不存在了
前面地址没有发生改变的话，localStorage依然存在 ，虽然页面改变了*/
function fn1(){
/* localStorage.setItem('car','bmw') */
localStorage.car = 'bc'
}
function fn2(){
/* document.write(localStorage.getItem('car')); */
document.write(localStorage.car);
}
/* 在页面A 本地存储 一个username 到本地 使用两种方式 存储
再新建一个页面B 在A页面中点击一个a 链接 跳转到 B页面
，看能否取到username 取值也使用两种方式
都在本地打开 使用 open in default brower */
</script>
A页面
<button onclick="fn()">本地存储</button>
<!-- <a href="B.html" target="_blank"> 跳转B页面</a> -->
<script>
function fn(){
/* localStorage.username = 'admin' */
/* localStorage.setItem('username','admin') */
/* localStorage 或者 sessionStorage
存的内容都是字符串类型*/
let obj1 = {
name:"zhangsan",
age:20
}
/* JSON.stringify 把对象转成字符串类型 */
let s = JSON.stringify(obj1);
localStorage.s = s;
/* ./B.html B.html 相对路径 */
/* 绝对路径 file:///C:/Users/ZhangSir/Desktop/js%E4%B8%AD%E7%9A%84bom%E5%92%8Cdom/B.html */
/* 跳转到指定的路径 跳转后 再历史记录 还存在之前的地址 所以可以返回 */
// location.href="file:///C:/Users/ZhangSir/Desktop/js%E4%B8%AD%E7%9A%84bom%E5%92%8Cdom/B.html"
/* 用新的路径来替换当前的路径 replace代表替换，把会历史记录里面的地址也替换了，所以没有返回功能 */
// location.replace('B.html')
/* window.open 会打开一个新的tab页 不会关闭之前的tab页 默认是 _blank*/
// open('B.html','_blank')
/* 和location.href功能一样 在原来的tab页上打开 */
sessionStorage.a = 1
sessionStorage.b = 2
open('B.html','_self')
/* A存取一个学生对象 name stuNo
B 显示出 学生对象 姓名 和 学号*/
}
</script>
B页面
<button onclick="clearOne()">清除username</button>
<button onclick="clearAll()">清除全部</button>
<script>
// document.write(localStorage.username);
// document.write(localStorage.getItem('username'));
// document.write(localStorage.obj.name);
/* document.write(localStorage.flag == 'true'); */
/* 再把字符串转成对象 */
let objs = JSON.parse(localStorage.s)
document.write(objs.name);
document.write(objs.age);
function clearOne(){
/* 清除指定的一项 */
sessionStorage.removeItem('a')
}
function clearAll(){
/* 全部清除 */
sessionStorage.clear();
}
/* 在sessionStorage 设置多个值 写两个按钮 删除其中的一项
和删除全部 */
</script>
</body>
