12

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.

1
  • 1
    Not sure what the question is here. You're saying you can't use clear so... Mar 18, 2013 at 22:05

3 Answers 3

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().

2
  • 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, 2013 at 20:58
  • @Jaxo if you have a different subdomain for each project clear() would still work Mar 19, 2013 at 23:28
5

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()

0

Clear() Method

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

removeItem() Method

  1. will only remove those localStorage items which you reference as an argument.
  2. 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>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.