-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-08-20
来源 ：「前端进阶学习交流」
阅读 480
评论 0
摘要：本文主要介绍了web前端开发JavaScript基础入门--JavaScript的Storage接口 ，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
本文主要介绍了web前端开发JavaScript基础入门--JavaScript的Storage接口 ，通过具体的内容向大家展现，希望对大家前端开发Javascript的学习有所帮助。
一、概念
Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。
二、属性和方法
1. Storage.setItem()
Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。
window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');
注:
Storage.setItem()两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。
window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[object Object]"
代码解析：
setItem方法的两个参数都不是字符串，但是存入的值都是字符串。
如果储存空间已满，该方法会抛错，写入不一定要用这个方法，直接赋值也是可以的。
2. Storage.getItem()
Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。
window.sessionStorage.getItem('key')
window.localStorage.getItem('key')
键名应该是一个字符串，否则会被自动转为字符串。
3. Storage.key()
Storage.key()接受一个整数作为参数(从零开始)，返回该位置对应的键值。
window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"
结合使用Storage.length属性和Storage.key()方法，可以遍历所有的键。
for (var i = 0; i < window.localStorage.length; i++)
{
console.log(localStorage.key(i));
}
三、Storage 事件
Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。
window.addEventListener('storage', onStorageChange);
监听函数接受一个event实例对象作为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。
如果非要在同一个网页中监听怎么办?
重写localStorage的方法, 抛出自定义的事件
<!DOCTYPE html>
<html>
<head>
<title>A</title>
</head>
<body>
<script>
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key, newValue) {
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this, arguments);
}
window.addEventListener("setItemEvent", function(e) {
alert(e.newValue);
});
localStorage.setItem("nm", "1234");
</script>
</body>
</html>
注：
如果浏览器只打开一个窗口，可能观察不到这个事件。
比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信。
四、总结
本文基于JavaScript 基础。介绍了相关的属性和方法。通过案例的分析分步进行讲解。介绍了Storage 事件在实际的应用，在实际应用中遇到的难点，提过有效的解决方案。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望对你学习有帮助。
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
