Cookie
数据存储在计算机中,通过浏览器添加和删除
Cookie 的特点
存储限制, 一个域名100个cookie,每组值大小4kb
客户端,服务器端,都会请求服务器信息(头信息)
页面间的cookie是共享的
Storage
sessionStorage
-session临时回话,从页面打开到页面关闭的时间段
-窗口的临时存储,页面关闭,本地存储消失
localStorage
-永久存储(可以手动删除数据)
Storage的特点
存储量限制(5M)
客户端完成,不会请求服务器处理
sessionStorage数据是不共享的、localStorage共享
Code
<script>
window.onload = function () {
var oInput = document.getElementsByTagName("input");
//设置
oInput[0].onclick = function () {
window.localStorage.setItem('name', oInput[3].value);
};
//获取
oInput[1].onclick = function () {
alert(window.localStorage.getItem('name'));
};
//删除
oInput[2].onclick = function () {
window.localStorage.removeItem('name');
};
//数据更改时会被触发|在当前页面的这个事件修改的话,不会被修改。
window.addEventListener('storage', function (ev) {
var ev = ev || window.event;
console.log(ev.key);
console.log(ev.url);
console.log(ev.newValue);
console.log(ev.oldValue);
console.log(ev.storageArea);
alert(123);
}, false);
}
</script>
案例二:
<script>
//描述:运行本页面,再打开一个本页面、在其中一个页面选中值,另一个页面将会同步选中
window.onload = function () {
var oInput = document.getElementsByTagName("input");
oInput[0].onclick = function () {
//sessionStorage:临时性存储
//localStorage:永久性存储
//window.sessionStorage.setItem('name', oInput[3].value);
window.localStorage.setItem('name', oInput[3].value);
}
oInput[1].onclick = function () {
//alert(window.sessionStorage.getItem('name'));
alert(window.localStorage.getItem('name'));
}
}
</script>