localStorage - clear() or removeItem()?

Question

Should I use clear() to obliterate everything in localStorage, or should I just manually removeItem() the ones I've set on that particular site (which is easy enough to keep track of)?

I ask because I don't want to end up wiping out users' localStorage if they have other values set. I'm testing this in localhost and noticed that by using clear(), everything I'd set previously in other projects was wiped out.

EDIT: I should have mentioned that I know localStorage is domain-locked. I'm running a site that follows this structure:

public-html
(localStorage)
--project1
----files
--project2
----files
--project3
----files

Where each file uses it's own separate localStorage variables. If I localstorage.clear() inside project2, project1 and project3's settings will be lost as well.

Not sure what the question is here. You're saying you can't use `clear` so... — user123444555621, Mar 18 '13 at 22:05

score 12 · Accepted Answer · answered Mar 18 '13 at 20:48

12

localstorage is keyed to an origin. So if all of your projects are running on localhost, then you'll wipe all of your values when you use clear(), and the only safe method is individual removal.

In a production environment, each project should have its own domain and clear should be safe.

So it's a question of knowing what else is on the current origin. If you control everything on the current origin and don't mind wiping it all, clear() is the best choice and was designed for that purpose. If there are other parts of your code using localstorage or other projects hosted on the same origin then you will want to be more selective and use removeItem().

answered Mar 18 '13 at 20:48

Ben McCormick

25,260
12
52
71

Unfortunately I don't have a lone domain for every one of my projects - I simply couldn't afford that. I'd like to keep everything under my own personal 'portfolio'-esque website, with subfolders containing each of my separate, different projects. Thank you though, looks like `removeItem()` is the way to go! – Scott Mar 18 '13 at 20:58
@Jaxo if you have a different subdomain for each project `clear()` would still work – markasoftware Mar 19 '13 at 23:28

score 5 · Answer 2 · answered Mar 18 '13 at 20:47

clear() clears everything on the current origin (https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript). Using clear() on example.com will not affect the localStorage for example2.com. It is clearing data for all projects on your computer because all of the testing files that you have are on the same origin (http://localhost or file:///C:\). Therefore, it will be fine to use clear()

score 0 · Answer 3 · edited Aug 11 '21 at 10:20

Clear() Method

Will wipe out everything from your localStorage
Doesn't take any argument

removeItem() Method

will only remove those localStorage items which you reference as an argument.
To make removeItem work you must need to pass in an argument. For example:

removeItem("list") will only remove this The "list" key items

// For better understand code below

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="clear-method">Clear Method</button>
    <button id="removeItem-method">RemoveItem Method</button>


    <script>
        const clearMethod = document.getElementById("clear-method");
        const removeItemMethod = document.getElementById("removeItem-method");

        // declaring arraay for localStorage
        const computer = [
    {
        Brand: "Asus",
        Model: "Unknown"
    }
];

const phone = [
    {
        Brand: "Realme",
        Model: "Unknown"
    }
]

// setting up items on localStorage
localStorage.setItem("computer", JSON.stringify(computer));
localStorage.setItem("phone", JSON.stringify(phone));

        clearMethod.addEventListener("click", ()=>{
        localStorage.clear();
        })

        removeItemMethod.addEventListener("click", ()=>{
            localStorage.removeItem("phone");
        })
    </script>
   
</body>
</html>

localStorage - clear() or removeItem()?

3 Answers3

Linked