Book Image

Learn ECMAScript - Second Edition

By : MEHUL MOHAN, Narayan Prusty
Book Image

Learn ECMAScript - Second Edition

By: MEHUL MOHAN, Narayan Prusty

Overview of this book

Learn ECMAScript explores implementation of the latest ECMAScript features to add to your developer toolbox, helping you to progress to an advanced level. Learn to add 1 to a variable andsafely access shared memory data within multiple threads to avoid race conditions. You’ll start the book by building on your existing knowledge of JavaScript, covering performing arithmetic operations, using arrow functions and dealing with closures. Next, you will grasp the most commonly used ECMAScript skills such as reflection, proxies, and classes. Furthermore, you’ll learn modularizing the JS code base, implementing JS on the web and how the modern HTML5 + JS APIs provide power to developers on the web. Finally, you will learn the deeper parts of the language, which include making JavaScript multithreaded with dedicated and shared web workers, memory management, shared memory, and atomics. It doesn’t end here; this book is 100% compatible with ES.Next. By the end of this book, you'll have fully mastered all the features of ECMAScript!
Table of Contents (18 chapters)
Title Page
PacktPub.com
Contributors
Preface
Index

Handling storage changes across multiple tabs


Storage, when changed, emits certain events that can be captured by other opened tabs. You can set event listeners for them to listen and perform any appropriate modifications.

For example, let's say that you added something to localStorage in one tab of your website. A user has also opened another tab of your website. If you want to reflect the changes of localStorage in that tab, you can listen to the storage event and update the contents accordingly.

Note that the update event will be fired on every other tab except the one that made the change:

window.addEventListener('storage', e => { 
  console.log(e);
});
localStorage.setItem('myKey', 'myValue'); // note that this line was run in another tab

The preceding code produces the following output:

You can note that it contains a lot of useful information about the storage event.

Note

The web workers (discussed in Chapter 11) do not have access to local storage or session storage.