問題:我想用localStorage在多個tab下共享數據，但是看了下localStorage里面沒有像C++的Mutex一樣的鎖，那我怎么保證原子的讀和寫？

答:C++的mutex是使用操作系統的原子性操作實現的，在瀏覽器環境下沒有什么參考的價值。不過，

在這篇文章里面，大牛Lamport介紹了利用兩塊共享區域實現快速鎖的算法，如下所示：

假設有兩塊共享的區域x和y，以及進程的id，以下圖的方式進入關鍵區域

進入關鍵區域需要的操作至少需要: 寫x -> 讀y -> 寫y -> 讀x -> 關鍵操作 -> 寫y。

其中delay必須足夠長到使得已經在關鍵區域內的進程完成關鍵區域內的操作并退出。

Lamport的文章也證明了這個算法的正確性，可以通過這個鏈接了解詳細的信息。

?

有了這個算法之后，實現一個localStorage上的鎖就很簡單啦，下面是我的一個簡單實現:

const THREAD_ID = `${Math.floor(Math.random() * 1000)} - ${Date.now()}`;const setItem = localStorage.setItem.bind(localStorage); const getItem = localStorage.getItem.bind(localStorage); const removeItem = localStorage.removeItem.bind(localStorage);const nextTick = fn => setTimeout(fn, 0);class Mutex {constructor (key) {this.keyX = `mutex_key_${key}_X`;this.keyY = `mutex_key_${key}_Y`;}lock() {return new Promise((resolve, reject) => {const fn = () => {setItem(this.keyX, THREAD_ID);if (!getItem(this.keyY) == null) {nextTick(fn); //restart}setItem(this.keyY, THREAD_ID);if (getItem(this.keyX) !== THREAD_ID) {//delaysetTimeout(() => {if (getItem(this.keyY) !== THREAD_ID) {nextTick(fn) //restartreturn;}//critical sectionresolve();removeItem(this.keyY);}, 10);} else {resolve();removeItem(this.keyY);}};fn();});} }const KEY = 'key';let mutex = new Mutex(KEY); mutex.lock().then(() => {let value = parseInt(localStorage.getItem(KEY) || 0, 10);value += 1;localStorage.setItem(KEY, value); });

?

總結

以上是生活随笔為你收集整理的有没有可以在JavaScript里可以用的锁?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。