LocalStorage Select已禁用

Question

I have this design. and what I'm trying to do is that the ones that are selected to keep them disabled in the localStorage And that when the page is refreshed or closed and opened again they remain disabled.

$(function() {
    $('.asignarConteo').on('click', function(e) {
        $('.widthSelect :selected[value!="0"]').closest("tr").each(function() {
            //console.log(
            //    $(this).find(".iarticulo").text(),
            console.log($(this).find(":selected").val());

            var ar = $(this).find(".iarticulo").text();
            var usu = $(this).find(":selected").text();
            $.ajax({
                url: 'http://localhost:3000/AsigUsuarios',
                method: 'post',
                //persist: true,
                //cache: true,
                data: { idArticulo: ar, Usuario: usu },
                success: function(res) {
                    console.log(res);
                    console.log('Entro');
                    $(".widthSelect").filter(function() {
                        return this.selectedIndex > 0;
                    }).prop('disabled', true);

                    //SaveLocalStorage
                }
            });
        })
    });

});

Answer 1

Storing data in the localStorage object is quite simple:

//Selected rows array.
var selectedRowIds = ['1', '2', '3', '5'];

//Store in local storage.
localStorage.setItem('rowsSelected', JSON.stringify(selectedRows));

//Read from local storage.
JSON.parse(localStorage.getItem('rowsSelected'));

You can update the localStorage.rowsSelected item every time a row is selected, and when you load the page, get the array, loop through it and make you changes to the DOM.