Ensuring that localStorage objects continue to iterate when clear() is called within the same function

Question

Ensuring that localStorage objects continue to iterate when clear() is called within the same function

When a user completes the game loop or starts a new game, I want to clear all local storage while still keeping certain values intact.

Currently, I am able to do this for sound volume values:

// code inside a conditional statement triggered when starting a new game
if (newGameBool === '1') {
    var tst = myAu;
// myAu is the stored sound value set by the user using an input range

    localStorage.clear();

    localStorage.setItem("Au", tst); // After clearing local storage, set the same value again 

    UI.myLoad(); // Reload function that interacts with local storage

}

How can I achieve the same for keys with iterating numbers attached to them?

Here is how I save these keys:

var i = +v + +1; 

localStorage.setItem("v", i);

var vv = localStorage.getItem("v");

localStorage.setItem("LdrBrd_" + vv, JSON.stringify(LdrBrd)); // Saves data with iterating key names

Implementing retrieval similar to the sound function:

var gv = v + 1; // Retrieve the value from local storage and adjust for off-by-one error. gv is a local variable.
if (newGameBool === '1') {
    var ldd, vg;

    for (var ii = 0; ii < gv; ii++) {
        var ld = localStorage.getItem("LdrBrd_" + ii);
        if (ld != null) {
        // Values to retain beyond the clearing point
            ldd = JSON.parse(ld); // Parse saved JSON string data
            vg = ii; // Number of values retrieved
        }

    }

    localStorage.clear();

    for (var xx = 0; xx < vg; xx++) {
        var nld = localStorage.getItem("LdrBrd_" + xx);
        if (nld != null) {
           localStorage.setItem("LdrBrd_" + ii, JSON.stringify(ldd));
        }
    }
    localStorage.setItem("v", vg);

    UI.myLoad();

}

I have been using console.log() at different points to monitor the process. I commented out the clear function just to check if the values were incorrect, but they did not save at all. I attempted to create a fiddle, but local storage was not functioning there. In Visual Studio, everything works fine, but the script for this file is nearly 2000 lines long, so I tried to organize it as best as I could.

Thank you in advance for any assistance or advice.

javascript json local-storage

Answer 1

Answer №1

After spending several days stuck on this issue, I believe I have found a solution that works. In the spirit of posterity, I will provide an answer to my own question.

localStorage.clear();
/*  ^LS clear() function is above all new setItem codes, some variables are declared globally and some are declared at the top of the functional scope or as param^  */
var itemClass = document.querySelectorAll(".itemClass");//the strings are here

if (itemClass) {//make sure some exist
    for (var p = 0; p < itemClass.length; p++) {//count them
        mdd = JSON.parse(itemClass[p].innerText);//parse the data for saving

        localStorage.setItem("v", v);//this is the LS item that saves the amount of items i have, it's declared at the top of the functions timeline.
        localStorage.setItem("LdrBrd_" + p, JSON.stringify(mdd));//this setItem function will repeat and increment with 'p' and assign the right string back to the key name it had before.
    }
}

The key approach is to link the strings directly to an element by calling the class name. I then ran a loop to count them. 'mdd' captures each desired item. Finally, the items are reset to their original state.

This method has enabled me to create a system for users to collect trophies, which persist even after clearing the localStorage when starting a new game.

I utilized CSS to hide the text from the string.

color:transparent;

In my gameLoop, there is a function that reads the saved strings and displays them as cards beneath the hidden strings.

Answer 2

After spending several days stuck on this issue, I believe I have found a solution that works. In the spirit of posterity, I will provide an answer to my own question.

localStorage.clear();
/*  ^LS clear() function is above all new setItem codes, some variables are declared globally and some are declared at the top of the functional scope or as param^  */
var itemClass = document.querySelectorAll(".itemClass");//the strings are here

if (itemClass) {//make sure some exist
    for (var p = 0; p < itemClass.length; p++) {//count them
        mdd = JSON.parse(itemClass[p].innerText);//parse the data for saving

        localStorage.setItem("v", v);//this is the LS item that saves the amount of items i have, it's declared at the top of the functions timeline.
        localStorage.setItem("LdrBrd_" + p, JSON.stringify(mdd));//this setItem function will repeat and increment with 'p' and assign the right string back to the key name it had before.
    }
}

The key approach is to link the strings directly to an element by calling the class name. I then ran a loop to count them. 'mdd' captures each desired item. Finally, the items are reset to their original state.

This method has enabled me to create a system for users to collect trophies, which persist even after clearing the localStorage when starting a new game.

I utilized CSS to hide the text from the string.

color:transparent;

In my gameLoop, there is a function that reads the saved strings and displays them as cards beneath the hidden strings.

Answer 3

Answer №2

To maintain certain values, I suggest following one of these two approaches:

Avoid using localStorage.clear() and instead selectively remove the values you don't want by using
```
localStorage.removeItem('itemName')
```
. If your item names have a numeric aspect, consider implementing this in a loop to streamline the process.
Prioritize saving the specific item(s) you want to keep before executing clear(), then restore them afterwards. This method is more suitable when there are significantly more items to be deleted than retained (refer below).

function mostlyClear() {
    var saveMe = {};
    saveMe['value1'] = localStorage.getItem('value1');
    saveMe['anotherValue'] = localStorage.getItem('anotherValue');
    localStorage.clear();
    for(var prop in saveMe) {
        if(!saveMe.hasOwnProperty(prop)) continue;

        localStorage.setItem(prop, saveMe[prop]);
    }
}

Answer 4

To maintain certain values, I suggest following one of these two approaches:

Avoid using localStorage.clear() and instead selectively remove the values you don't want by using
```
localStorage.removeItem('itemName')
```
. If your item names have a numeric aspect, consider implementing this in a loop to streamline the process.
Prioritize saving the specific item(s) you want to keep before executing clear(), then restore them afterwards. This method is more suitable when there are significantly more items to be deleted than retained (refer below).

function mostlyClear() {
    var saveMe = {};
    saveMe['value1'] = localStorage.getItem('value1');
    saveMe['anotherValue'] = localStorage.getItem('anotherValue');
    localStorage.clear();
    for(var prop in saveMe) {
        if(!saveMe.hasOwnProperty(prop)) continue;

        localStorage.setItem(prop, saveMe[prop]);
    }
}

Ensuring that localStorage objects continue to iterate when clear() is called within the same function

Answer №1

Answer №2

Similar questions

Ensure that the line above is shorter in length compared to the following line

The leaflet_Ajax plugin is constantly searching for the default marker symbol located at js/images/marker-icon.png

Is there a way to send JSON using ExpressJS in UTF-8 encoding?

The controller function is not triggered if the user does not have administrator privileges

How can I access a value stored within a JSON structure containing nested dictionaries?

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

Establishing flow types and generating unchangeable records

Here's a guide on executing both GET and POST requests using a single form

What is the best way to remove table cells from a TableBody?

Converting a JSON to CSV for a substantial dataset - currently closed

Issues with JSON data not functioning properly when using file system in JavaScript

The onClick event in React/NextJS is not functioning properly when applied to an external component

Build a unique array of identifiers extracted from an object

Access view name in controller using Ui-Router

Attempting to grasp the fundamentals of angular Routing, however, upon attempting to reload the page, nothing appears to be displayed

Exploring the nested JSON field using a map function

How is the server architecture typically designed in a node.js application?

"Unleashing the power of React Native: A single button that reveals three different names

Tips for customizing the appearance of a Link component while it is the active page in Next.js