目录
一、cookie
1.cookie的特点:
(1)数据持久型,即数据在浏览器关闭时才删除
(2)cookie可配置到期,控制其生命周期,使之不会永远有效
2.cookie的方法
(1)利用Cookies.get()来创建cookie以及cookie的内容
(2)expires可用来设置cookie的有效时间
(3)利用Cookies.set()来获取cookie内容
(4)利用Cookies.remove()来清除cookie的内容
实例:
<!-- 引入cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>
<body>
<script>
//创建cookie 包括内容区域以及设置7天后到期
Cookies.set('name','wan',{expires:7});
//获取cookie
Cookies.set('name');
//清除cookie
//Cookies.remove('name');
</script>
</body>
打开页面中的存储,即可查到cookie存储信息
若使用清除Cookie,则页面存储会清空
二、sessionStorage
1.特点:
(1)仅在当前页面下有效,关闭页面或浏览器时会被清除
(2)打开多个相同的URL的页面,会创建各自的sessionStorage,关闭对应浏览器会清除相应的sessionStorage
(3)页面重新加载或恢复页面仍会保持原来的页面会话
2.方法:
(1)利用sessionStorage.setItem()来创建sessionStorage对象
(2)利用sessionStorage.getItem()来获取sessionStorage对象
(3)利用sessionStorage.remove()来移除单个的sessionStorage对象
(4)利用sessionStorage.clear()来清空sessionStorage所有对象
<!-- 引入cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"> </script>
<body>
<script>
// 创建sessionStorage对象 创建两个
sessionStorage.setItem('username','su');
sessionStorage.setItem('age',21);
// 获取sessionStorage对象
sessionStorage.getItem('username','age');
// 移除单个sessionStorage对象
// sessionStorage.removeItem('username')
// 清空sessionStorage对象
// sessionStorage.clear();
</script>
</body>
在页面的存储中显示:
移除单个时:
清空时:
若创建sessionStorage时,传入的是对象类型,需要将其转换为字符串,在获取到sessionStorage后,若想拿到对象中的属性时,又要将其转换为对象格式
<!-- 引入cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"> </script>
<body>
<script>
// 若传进的内容是对象类型
sessionStorage.setItem('person',JSON.stringify({
name:'wan',
age:21
}))
// 获取sessionStorage对象
var namePerson = JSON.parse(sessionStorage.getItem('person')).name;
console.log(namePerson);
</script>
</body>
其中页面控制台可打印其对象内的属性值
其存储页面,也有对应的内容
三、localStorage本地存储
1.特点:
(1)localStorage 会可以将第一次请求的数据直接存储到本地
(2)可以将请求得到的数据和用户习惯性行为的信息存储在本地,不用重复请求服务器,提升响应速度
2.方法:
(1)利用localStorage.setItem()来创建localStorage
(2)利用localStorage.getItem()来获取localStorage
(3)利用localStorage.remove()来移除localStorage
(4)利用localStorage.clear()来清空localStorage
<!-- 引入cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"> </script>
<body>
<script>
// 创建localStorage对象 两个
localStorage.setItem('username','H');
localStorage.setItem('age',18);
// 获取localStorage对象
localStorage.getItem('username','age');
// 移除localStorage对象
// localStorage.removeItem('username');
// 清空localStorage对象
// localStorage.clear()
</script>
</body>
此时的存储页面:
存储对象类型
<!-- 引入cookie -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"> </script>
<body>
<script>
localStorage.setItem('person',JSON.stringify({
name:'SWX',
age:19
}))
var agePerson = JSON.parse(localStorage.getItem('person')).age;
console.log(agePerson);
</script>
</body>
此时之前的本地数据也会存在,控制台输出age值
四、通信
1.跨文本消息传输
(1)可利用window.open()打开另一个页面
(2)可通过postMessage()来发送数据
(3)利用iframe嵌套页面
(4)iframe节点.contentWindow()取得该对象
<!-- 页面A -->
<body>
<div>SuwanH - page - A</div>
<button id="openB">跳转</button>
<button id="iframe">内嵌</button>
<button id="sent">发送数据</button>
<iframe src="././page-B.html" width="200" height="200" frameborder="0"></iframe>
</body>
<script>
var openB = document.getElementById('openB')
var iframe = document.getElementById('iframe')
var sent = document.getElementById('sent');
var iframes = document.getElementsByTagName('iframe')[0]
let win;//相当于otherWindow
openB.onclick = function(){
win = window.open('./page-B.html')
}
iframe.onclick = function(){
win = iframes.contentWindow;
}
sent.onclick = function(){
win.postMessage('wan')
}
</script>
<!--页面B-->
<style>
div{
width: 150px;
height: 150px;
background-color: palevioletred;
}
</style>
<body>
<div>SuwanH - page - B</div>
<script>
// 接收数据
window.onmessage = function(event){
console.log(event.data);
}
</script>
</body>
即可在页面A点击按钮时对页面B进行操作