Correct usage of localStorage.clear()

Question

I understand that localStorage.clear() clears all key/value pairs created by for localStorage. From what I read, that means all localStorage information for a particular domain. I also understand that there may be different localStorage(s) keys for different browsers.

The part that I am unclear about (no pun intended) is:

Does it clear all key/value pairs created on a PC that were created by any program that sets a localStorage anywhere on the same browser?

or

Does it clear all key/value pairs created on the PC for the program currently executing by the browser?

In other words, does the localStorage.clear() function clear ALL settings for a PC, even the ones the programmer might not know are in existence? It is deleting localStorage values for settings of other programs executed on the PC? If so, what is the protections to avoid clearing values not intended to be modified by your particular program for OTHER programs using localStorage?

I found a function to create a list of all localStorage values on the PC.

    const allKeys = Object.keys(localStorage);
    
    console.log(allKeys.join('\n'));

So, do I need to check this list for ONLY the keys that I use in my localStorage usage and then remove setting with localStorage.remove(key) only, or is this an unnecessary step?

Consider original domain is 'myDomain.org' or something similar.考虑原始域是“myDomain.org”或类似的东西。 If I have two programs that use some localStorage settings, say 'script1' uses 'contacts' and 'script2' uses 'xmasList'

I can remove localStorage in each INDIVIDUAL script with localStorage.removeItem('contacts') or localStorage.removeItem('xmasList');

If I use localStorage.clear() in EITHER of the scripts, does it remove the all storage key/values for BOTH since I am in the same domain? If yes, it would seem to be dangerous to use without some prior thought!

Save following as 'lsPage1.html'

    <!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
    <title> Share Page1 Information with localStorage </title>
    
    <!-- link rel="stylesheet" href="common.css" media="screen" -->
    <!-- Highly modified from: https://medium.com/@cyberbotmachines/how-to-pass-value-from-one-html-page-to-another-using-javascript-3c9ab62df4d -->
    </head><body>
    <h1> Page 1 localStorage Demo </h1>
    <h3> <a href='https://medium.com/@cyberbotmachines/how-to-pass-value-from-one-html-page-to-another-using-javascript-3c9ab62df4d'
            target='_blank'> Reference </a>
    </h3>
    <pre  id="demo"></pre>
    
    <input type="text" id='lsInfo' value=''>
    <button onclick="saveInfo(document.getElementById('lsInfo').value)">Save Page 1 Info</button> 
    <button onclick="showAllLS()"> Show Keys </button>
    <p>&nbsp;</p>
    <button onclick="demo.innerHTML=localStorage.getItem('lsPage1')"> Page 1 Info </button>
    <button onclick="demo.innerHTML=localStorage.getItem('lsPage2')"> Page 2 Info </button>
    <p>&nbsp;</p>
    <button onclick="localStorage.removeItem('lsPage1')"> localStorage.removeItem('lsPage1') </button>
    <button onclick="confirmClearAll()"> localStorage.clear() </button>
    
    <script>
     const demo = document.getElementById('demo');
    
     function saveInfo(info) {
       localStorage.setItem('lsPage1', info);
       console.log(info);
     }
    
     function showAllLS() {
        const allKeys = Object.keys(localStorage);
        demo.innerHTML = allKeys.join('\n');
        demo.innerHTML += '\nlsPage1Info: '+localStorage.getItem('lsPage1')
     }
     
     function confirmClearAll() {
       var txt;
       var r = confirm("Really clear ALL?");
       if (r == true) {
         txt = "You pressed OK!";
         localStorage.clear();
       } else {
         txt = "You pressed Cancel!";
       }
       demo.innerHTML = txt;
    }
    </script>
    
    </body></html>

And save following as 'lsPage2.html'

    <!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
    <title> Share Page2 Information with localStorage </title>
    
    <!-- link rel="stylesheet" href="common.css" media="screen" -->
    <!-- Highly modified from: https://medium.com/@cyberbotmachines/how-to-pass-value-from-one-html-page-to-another-using-javascript-3c9ab62df4d -->
    </head><body>
    <h1> Page 2 localStorage Demo </h1>
    <h3> <a href='https://medium.com/@cyberbotmachines/how-to-pass-value-from-one-html-page-to-another-using-javascript-3c9ab62df4d'
            target='_blank'> Reference </a>
    </h3>
    <pre  id="demo"></pre>
    
    <input type="text" id='lsInfo' value=''>
    <button onclick="saveInfo(document.getElementById('lsInfo').value)">Save Page 2 Info</button>
    <button onclick="showAllLS()"> Show Keys </button>
    <p>&nbsp;</p>
    <button onclick="demo.innerHTML=localStorage.getItem('lsPage1')"> Page 1 Info </button>
    <button onclick="demo.innerHTML=localStorage.getItem('lsPage2')"> Page 2 Info </button>
    <p>&nbsp;</p>
    <button onclick="localStorage.removeItem('lsPage2')"> localStorage.removeItem('lsPage2') </button>
    <button onclick="confirmClearAll()"> localStorage.clear() </button>
    
    <script>
     const demo = document.getElementById('demo');
     
     function saveInfo(info) {
       localStorage.setItem('lsPage2', info);
       console.log(info);
     }
    
     function showAllLS() {
        const allKeys = Object.keys(localStorage);
        demo.innerHTML = allKeys.join('\n');
        demo.innerHTML += '\nlsPage2Info: '+localStorage.getItem('lsPage2')
     }
    
     function confirmClearAll() {
       var txt;
       var r = confirm("Really clear ALL?");
       if (r == true) {
         txt = "You pressed OK!";
         localStorage.clear();
       } else {
         txt = "You pressed Cancel!";
       }
       demo.innerHTML = txt;
    }
    </script>
    
    </body></html>

Both pages are stored as separate files in the same directory.

Now when executed by browsers:

You can save some information about the page or
You can retrieve the information saved

Then you can retrieve saved information for each page

EXCEPT: lsPage1.html DOES NOT retrieve lsPage2.html information. and visa versa. I cannot figure out why, when I thought it was supposed to while in the same domain.

Also, you can remove the information for a particular page. This works OK.

But when you ask for all the localStorage keys, you only get the one for the page you are in.

Again, I cannot figure out why, when I thought it was supposed to while in the same domain.

I must be thinking or doing something wrong (all pages validate) in my concept of localStorage usage.

I hope I have explained my quandry.

Answer 1

You can only access local storage values from the domain the javascript is called from. You cannot view localstorage from other domains using javascript on your own page.

There is a "firewall" between localstorage and your pc. Though some browsers allow you to view localstorage for all domains.

Answer 2

It clean all localstorage data of current domain.

Other domains can't create or remove localstorage data.

Correct usage of localStorage.clear()

Question

1 answers

solution1
1 2021-12-01 17:44:45

solution2
0 2021-12-01 17:32:16

Correct usage of localStorage.clear()

Question

1 answers

solution1 1 2021-12-01 17:44:45

solution2 0 2021-12-01 17:32:16

solution1
1 2021-12-01 17:44:45

solution2
0 2021-12-01 17:32:16