当前位置：首页 > 科技 > 软件

一篇文章带你了解JavaScript的Storage接口

来源：责编：时间：2024-05-23 17:07:25 83观看

导读一、概念Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。二、属性和方法1. Storage.setItem()Storage.setItem()方法用于存入数据。它接受两个参数，第一

一、概念

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 接口，有几个特有的属性，都是只读属性。

属性	解析
StorageEvent.key	字符串，表示发生变动的键名。如果 storage 事件是由clear()方法引起，该属性返回null。
StorageEvent.newValue	字符串，表示新的键值。如果 storage 事件是由clear()方法或删除该键值对引发的，该属性返回null。
StorageEvent.oldValue	字符串，表示旧的键值。如果该键值对是新增的，该属性返回null。
StorageEvent.storageArea	对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。
StorageEvent.url	字符串，表示原始触发 storage 事件的那个网页的网址。

如果非要在同一个网页中监听怎么办?

重写localStorage的方法, 抛出自定义的事件

<!DOCTYPE html><html>    <head lang="en">        <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 事件在实际的应用，在实际应用中遇到的难点，提过有效的解决方案。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望对你学习有帮助。

本文链接：http://www.28at.com/showinfo-26-90337-0.html一篇文章带你了解JavaScript的Storage接口

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：欧洲也要打造自己的“SpaceX”，欧空局选定两家公司为国际空间站提供商业货运服务

下一篇： yolov部署到iPhone或终端实践全过程

标签：

热门焦点

MIX Fold3包装盒泄露新机本月登场

小米的全新折叠屏旗舰MIX Fold3将于本月发布，近日该机的真机包装盒在网上泄露。从图上来看，新的MIX Fold3包装盒在外观设计方面延续了之前的方案，变化不大，这也是目前小米旗舰
红魔电竞平板评测：大屏幕硬实力

前言：三年的疫情因为要上网课的原因激活了平板市场，如今网课的时代已经过去，大家的生活都恢复到了正轨，这也就意味着，真正考验平板电脑生存的环境来了。也就是面对着这种残酷的
从 Pulsar Client 的原理到它的监控面板

背景前段时间业务团队偶尔会碰到一些 Pulsar 使用的问题，比如消息阻塞不消费了、生产者消息发送缓慢等各种问题。虽然我们有个监控页面可以根据 topic 维度查看他的发送状态，
只需五步，使用start.spring.io快速入门Spring编程

步骤1打开https://start.spring.io/，按照屏幕截图中的内容创建项目，添加 Spring Web 依赖项，并单击“生成”按钮下载 .zip 文件，为下一步做准备。请在进入步骤2之前进行解压。图
腾讯盖楼，字节拆墙

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之“想重温暴刷深渊、30+技能搭配暴搓到爽的游戏体验吗？一起上晶核，即刻暴打！”曾凭借直播腾讯旗下代理格斗游戏《DNF》一
OPPO K11采用全方位护眼屏：三大护眼能力减轻视觉疲劳

日前OPPO官方宣布，全新的OPPO K11将于7月25日正式发布，将主打旗舰影像，和同档位竞品相比，其最大的卖点就是将配备索尼IMX890主摄，堪称是2000档位影像表
联想的ThinkBook Plus下一版曝光，键盘旁边塞个平板

ThinkBook Plus 是联想的一个特殊笔记本类别，它在封面放入了一块墨水屏，也给人留下了较为深刻的印象。据有人爆料，联想的下一款 ThinkBook Plus 可能更特殊，它
亲历马斯克血洗Twitter，硅谷的苦日子在后头

文/刘哲铭　　编辑/李薇　　马斯克再次挥下裁员大刀。　　美国时间11月14日，Twitter约4400名外包员工遭解雇，此次被解雇的员工的主要工作为内容审核等。此前，T
荣耀Magic4 至臻版首创智慧隐私通话强劲影音系统

2022年第一季度临近尾声，在该季度内，许多品牌陆续发布自己的最新产品，让大家从全新的角度来了解当今的手机技术。手机是电子设备中，更新迭代十分迅速的一款产品，基