Refreshing a variable when records deleted from localStorage

Question

I have a localStorage object like this:

Key: jpxun

Value: [{"id":"0","name":"royal"},{"id":"1","name":"tippins"},{"id":"4","name":"leviosa"},{"id":"5","name":"vicious"}]

I have this JS to display the localStorage records:

    // get localStorage info
    
    var jpxun = JSON.parse(localStorage.getItem('jpxun')) || [];

    // get localStorage length      
    if (jpxun) {
        var jpxun_length = jpxun.length;
    } else {
        var jpxun_length = 0;
    }

    // assign variables for HTML ID elements
    var list_items = document.getElementById("usernames");
    var plaintext_textarea = document.getElementById("plaintext");

    // assign a MyUsernames variable        
    var MyUsernames = JSON.parse(localStorage.getItem("jpxun"));
    
    // if localStorage length > 0
    if (jpxun_length > 0) {
        
        // loop through localStorage
        // get the word part of the username and wrap in list item HTML
        // add a link in the list item to delete the localStorage ite via 'deleteById'
        
        for (var i = 0; i < MyUsernames.length; i++) {

            // assign a variable to hold the username
            var un1 = MyUsernames[i].name;

            list_items.innerHTML += "<li>" +"<a id="+MyUsernames[i].id + " href='#' onclick='deleteById(this)'>" + un1 + "</a></li>";
            
            // build plaintext version of username list
            plaintext_textarea.innerHTML += un1 + "\n";
        }

    }
    
    // function to delete records from localStorage

    var deleteById = function ( self ) {
        
        MyUsernames = MyUsernames.filter(function(elem) {
            return elem.id !== self.id;
        });

        localStorage.setItem("jpxun",JSON.stringify(MyUsernames));
        self.parentNode.parentNode.removeChild(self.parentNode);
                            
        // try to re-do plaintext content
        
        var jpxun2 = JSON.parse(localStorage.getItem('jpxun')) || [];
        var MyUsernames2 = JSON.parse(localStorage.getItem("jpxun2"));
    
        for (var i = 0; i < MyUsernames2.length; i++) {
            var un1 = MyUsernames[i].name;
            plaintext_textarea.innerHTML += un1 + "\n";
        }
    
    }

I realise that's a bit of code overload...

Basically it all works - the thing I can't get to work is that when I delete a record from localStorage, e.g. by clicking HTML for a list item for a word, which might look like this:

<li><a id="1" href="#" onclick="deleteById(this)">tippins</a></li>

Then the record is deleted from localStorage, and div id usernames containing the words as list items is automatically refreshed, as the deleted record is removed.

However, the list of words in the textarea is not refreshed (even though it is built up from the list of items in localStorage).

Here's what I tried to refresh the textarea list of words when a word is deleted from localStorage in the deleteById function:

// try to re-do plaintext content

var jpxun2 = JSON.parse(localStorage.getItem('jpxun')) || [];
var MyUsernames2 = JSON.parse(localStorage.getItem("jpxun2"));

for (var i = 0; i < MyUsernames2.length; i++) {
    var un1 = MyUsernames2[i].name;
    plaintext_textarea.innerHTML += un1 + "\n";
}

However - that doesn't work, and the textarea list is not updated and the deleted words still appear in that.

The only way the textarea list is updated is when the page reloads, but I'd like to have the list automatically update when a record is deleted from localStorage, in the same way the list items are automatically updated.

I'm not sure if I understood your problem correctly... but does [How to change the Content of a with Javascript](https://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript) help you? — A_A, Oct 17 '20 at 20:51

score 1 · Accepted Answer · answered Oct 17 '20 at 20:58

1

I'd simply create a function with a single responsibility to render the content of the textarea based on the data stored in the localStorage, like below

function renderTextArea() {
  let data = JSON.parse(localStorage.getItem("jpxun")) || [];
  let content = data.map(u => u.name).join("\n");
  plaintext_textarea.innerHTML = content;
}

and then just call this function in your deleteById.

answered Oct 17 '20 at 20:58

siaznik

496
2
5

wow - yes - that's exactly what I'd do, if I knew what I was doing :-) that's perfect, thank you so much for your help! One question - if the words in localStorage contained a `.` how would I remove them? I tried `plaintext_textarea.innerHTML = content.replace(".", "");` but that only removes the dot from the first localStorage item, and not any of the others. – 4532066 Oct 17 '20 at 21:43
You may want to use regex for this one with a **g** flag (stands for global): `/\./g`. So the code would look like this: `content.replace(/\./g, '')` – siaznik Oct 17 '20 at 21:51

Refreshing a variable when records deleted from localStorage

1 Answers1