Storage实例对象
sessionStorage:为每一个给定的域维持一个独立的存储空间，该存储空间在页面会话期间可用，即只要浏览器处于打开状态，包括页面重新加载和回复
localStorage:在浏览器关闭后，重新打开数据仍然存在。（其他跟sessionStorage相同）
StorageEvent：
当Storage发生变化时，和它同域的、在其他Tab中打开的页面会收到StorageEvent事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Storage Event</title>
</head>
<body>
<input id="setNewDate" type="button" value="Set New Date" />
<div id="now"></div>
<script>
//监听Storage事件
window.addEventListener('storage', function (evt){
console.log(evt.key, evt.newValue, evt.oldValue, evt.storageArea, evt.url); },false);
function setNewDate() {
var newDate = new Date().toString();
localStorage.setItem('now',newDate);
document.getElementById('now').innerHTML = newDate;
}
//监听按钮点击事件
document.getElementById('setNewDate').addEventListener('click', setNewDate);
</script>
</body>
</html>
Storage 使用时注意点：
1.Storage:兼容性检测方法：
if (typeof localStorage !== 'undefined') {
// do something
} else {
console.log('您的浏览器不支持 localStorage');
}
if (typeof sessionStorage !== 'undefined') {
//do something
} else {
console.log('您的浏览器不支持 sessionStorage');
}
2.Storage:同步特性
Storage的所有方法都试同步的，意味着它们会阻塞主页面的渲染以及其他操作。
3.Storage:容量有限制
由于localStorge中的数据是要保存到用户电脑的磁盘上的，如果不受限，则攻击者可以写恶意代码将用户磁盘塞满。
Storage最初设计目的：
为了解决在不同窗口中同事操作多种事务的问题，Cookile不能很好的解决这个问题。
Storage使用场景（不保存敏感数据）：
localStorage：可以把一些非必须的、但又能提升用户体验的功能数据保存在localStorage中，最常见的是用户自定义设置的信息
sessionStorage：适合保存某次使用过程中，只会用到一次的功能数据。
网友评论