写在前面的

大家好，我是 海拥 ，专注于前端知识的分享。今天将给大家带来的是 400 个最常见的 JavaScript 面试问答第五部分。接下来我会持续更新（争取日更，也可能每周3-5篇），每小节大概 10 道题左右，总共会有 400 多道。

大家一定要记得点赞收藏呀！！！

41.cookie、本地存储和会话存储有什么区别 ？

以下是 cookie、本地存储和会话存储之间的一些区别，

特征	cookie	本地存储	会话存储
在客户端或服务器端访问	服务器端和客户端	仅客户端	仅客户端
Lifetime	使用 Expires 选项配置	直到删除	直到选项卡关闭
SSL	支持	支持的	不支持
最大数据大小	4KB	5 MB	5MB

---

42.localStorage 和 sessionStorage 的主要区别是什么？

LocalStorage 与 SessionStorage 相同，但即使浏览器关闭并重新打开（即它没有过期时间），它也会保留数据，而在 sessionStorage 中，当页面会话结束时，数据会被清除。

---

43.你如何访问web 存储？

Window 对象实现了WindowLocalStorage和WindowSessionStorage对象，它们分别具有localStorage(window.localStorage) 和sessionStorage(window.sessionStorage) 属性。这些属性创建 Storage 对象的实例，通过该实例可以为特定域和存储类型（会话或本地）设置、检索和删除数据项。
例如，您可以读写本地存储对象，如下所示

localStorage.setItem('logo', document.getElementById('logo').value);localStorage.getItem('logo');

---

44.会话存储有哪些可用的方法？

会话存储提供了读取、写入和清除会话数据的方法

// 将数据保存到 sessionStoragesessionStorage.setItem('key', 'value');// 从 sessionStorage 获取保存的数据let data = sessionStorage.getItem('key');// 从 sessionStorage 中删除保存的数据sessionStorage.removeItem('key');// 从 sessionStorage 中删除所有保存的数据sessionStorage.clear();

---

45.什么是存储事件及其事件处理程序？

StorageEvent 是在另一个文档的上下文中更改存储区域时触发的事件。而 onstorage 属性是一个用于处理存储事件的 EventHandler。
语法如下

window.onstorage = functionRef;

让我们以记录存储键及其值的 onstorage 事件处理程序的示例用法为例

window.onstorage = function(e) {console.log('The ' + e.key +' key has been changed from ' + e.oldValue +' to ' + e.newValue + '.');};

---

46.为什么需要web 存储？

Web存储更安全，可以在本地存储大量数据，不影响网站性能。此外，信息永远不会传输到服务器。因此，这是比 Cookie 更推荐的方法。

---

47.你如何检查 Web 存储浏览器支持？

在使用网络存储之前，您需要检查浏览器对 localStorage 和 sessionStorage 的支持，

if (typeof(Storage) !== "undefined") {// localStorage/sessionStorage 的代码。} else {// 对不起！ 没有网络存储支持..}

---

48.你如何检查web workers浏览器支持？

在使用之前，您需要检查浏览器对 Web Worker 的支持

if (typeof(Worker) !== "undefined") {// Web worker支持的代码。} else {// 对不起！ 没有 Web Worker 支持.}

⬆ 返回顶部

---

49.举个 web worker 的例子

您需要按照以下步骤开始使用网络工作者进行计数示例

创建 Web Worker 文件：您需要编写一个脚本来增加计数值。我们将其命名为 counter.js

let i = 0;function timedCount() {i = i + 1;postMessage(i);setTimeout("timedCount()",500);}timedCount();

这里使用 postMessage() 方法将消息回传到 HTML 页面

创建 Web Worker 对象：您可以通过检查浏览器支持来创建 Web Worker 对象。让我们将此文件命名为 web_worker_example.js

if (typeof(w) == "undefined") {w = new Worker("counter.js");}

我们可以接收来自网络工作者的消息

w.onmessage = function(event){document.getElementById("message").innerHTML = event.data;};

终止 Web Worker：Web Worker 将继续侦听消息（即使在外部脚本完成后），直到它被终止。您可以使用 terminate() 方法终止对消息的侦听。

w.terminate();

重用 Web Worker：如果将 worker 变量设置为 undefined，则可以重用代码

w = undefined;

---

50.web worker 对 DOM 的限制是什么？

WebWorker 无权访问以下 javascript 对象，因为它们是在外部文件中定义的

• 窗口对象
• 文档对象
• 父对象

⬆ 返回顶部

---

最后，不要忘了❤或支持一下哦，你的支持是海海更新的动力！关注我后面会持续分享面试经验 & 前端相关的专业知识。

最后祝大家都能找到满意的实习和 offer！