从 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, eg 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.

Answer 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 .