Get localStorage không cần reload lại page

[Phan_Vu (Phan Vũ)]

Mọi người cho mình hỏi có cách nào để mình có thể get giá trị của local storage khi mà click đổi giá trị thì lập tức nó có thể nhảy lên alert("Tab 2"); mà mình không cần phải reload page để nó có thể nhận giá trị mới sau khi set được không nhỉ?

var is_tab_open = localStorage.getItem("is_tab_open");
if (is_tab_open === "2"){
	alert("Tab 2");
}
 
$(document).ready(function(){
    localStorage.setItem("is_tab_open", "1");

    $("#btn1").on("click", function(e){
	    e.preventDefault();
	    localStorage.setItem("is_tab_open", "1");
    })

    $("#btn2").on("click", function(e){
	    e.preventDefault();
	    localStorage.setItem("is_tab_open", "2");
    })
 )}

[utherpally]

Đây:

window.addEventListener('storage', function(e) {
  if(e.key == "is_tab_open" && e.newValue == "2") {
    alert("Tab 2");
  }
});

Question: Mình thấy bạn luôn luôn set is_tab_open = 1 khi load page thì sử dụng localStorage làm gì? nhỉ?

[Phan_Vu (Phan Vũ)]

Bạn cho mình hỏi khi click để set nó bằng 2 thì sao nó vẫn không thể nhảy vào trong alert nhỉ?

<button id="btn1">Btn 1</button>
<button id="btn2">Btn 2</button>
<script>
localStorage.setItem("is_tab_open", "1");

window.addEventListener('storage', function(e) {
  if(e.key == "is_tab_open" && e.newValue == "2") {
    alert("Tab 2");
  }
});

document.getElementById("btn1").addEventListener("click", function(){
	localStorage.setItem("is_tab_open", "1");
})

document.getElementById("btn2").addEventListener("click", function(){
	localStorage.setItem("is_tab_open", "2");
})
</script>

[ThaoNguyen1 (Nguyễn)]

@Phan_Vu như này chắc chắn alert

<button id="btn1">Btn 1</button>
<button id="btn2">Btn 2</button>
<script>
    localStorage.setItem("is_tab_open", "1");

    window.addEventListener('storage', function (e) {
        if (e.key == "is_tab_open" && e.newValue == "2") {
            alert("Tab 2");
        }
    });

    document.getElementById("btn1").addEventListener("click", function () {
        var x = window.open(); // <====== 
        x.localStorage.setItem("is_tab_open", "1");
        x.close(); // <====== 
    })

    document.getElementById("btn2").addEventListener("click", function () {
        var x = window.open();  // <====== 
        x.localStorage.setItem("is_tab_open", "2");
        x.close();  // <====== 
    })
</script>

P/S : Mình cũng không biết tại sao lại như vậy

[Phan_Vu (Phan Vũ)]

Cách này được nè, cám ơn bạn nha, hy vọng có ai có thể giải thích giúp mình. Mình cám ơn

[yecal (yecal Phạm)]

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_storage_storage

[utherpally]

From MDN Web docs:

The storage event of the Window interface fires when a storage area ( localStorage ) has been modified in the context of another document.

Tức là storage event xảy ra khi có sự thay đổi của 1 document khác thông qua window open, browser tabs khác, …
Nếu trong document hiện tại thì bạn có thể gọi hàm trực tiếp mà, sao phải gò bó từ storage event.

<button id="btn1">Btn 1</button>
<button id="btn2">Btn 2</button>
<script>
localStorage.setItem("is_tab_open", "1");
function on_tab_2_opened() {
  alert("Tab 2");
}

window.addEventListener('storage', function(e) {
  if(e.key == "is_tab_open" && e.newValue == "2") {
    on_tab_2_opened();
  }
});

document.getElementById("btn1").addEventListener("click", function(){
	localStorage.setItem("is_tab_open", "1");
})

document.getElementById("btn2").addEventListener("click", function(){
	localStorage.setItem("is_tab_open", "2");
    on_tab_2_opened();
})
</script>