Установите и используйте localStorage, чтобы сохранить выбранные флажки во время редактирования формы

Question

У меня есть форма, которая использует jqGrid для раздела формы.В этом разделе отображается информация о пользователе, которую можно выбрать с помощью флажка.На странице обзора есть возможность редактировать форму, и я пытаюсь сохранить выбранные флажки во время этого процесса.

Я пытаюсь использовать для этого window.localStorage, но я не уверен, как правильно настроить элемент.Я вызываю getItem в loadComplete, и мое кодирование здесь может быть не совсем правильным.Что у меня сейчас, когда пользователь идет на редактирование, выбирает первый элемент в jqGrid вместо фактического сохраненного элемента.Я предполагаю, потому что я не правильно установил элемент.Кто-нибудь может предложить руководство?

$.jgrid.gridUnload("#list");

myGrid = $("#list").jqGrid({
    url: baseURL + '/scripts/get_user_list.php' + urlString,
    datatype: "json",
    mtype: 'POST',
    width: 660,
    height: '100%',
    pager: '#pager',
    rowNum: 10,
    rowList: [20, 30, 40, 50, 60],
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    multiselect: true,
    repeatitems: false,
    imgpath: '/scripts/jquery-ui/images',

    colNames: ['id', 'Building', 'Company ID', 'Description', 'Individual Name', 'SECCode'],
    colModel: [
        {name: 'id', index: 'id', jsonmap: 'id', hidden: true, width: 20},
        {name: 'Building', index: 'Building', jsonmap: 'Building', hidden: true, width: 20},
        {name: 'CompanyId', index: 'CompanyId', jsonmap: 'CompanyId', width: 110},
        {name: 'Description', index: 'Description', jsonmap: 'Description', sortable: true, width: 300},
        {name: 'IndName', index: 'IndName', jsonmap: 'IndName', width: 200},
        {name: 'UsrNum', hidden: true, index: 'UsrNum', jsonmap: 'UsrNum'}
    ],
    jsonReader: {
        repeatitems: false,
        root: 'rows',
        id: '0',
        cell: '',
        subgrid: {
            root: 'rows',
            id: '0',
            cell: '',
            repeatitems: false
        }
    },

    // subgrid support
    subGrid: true,
    subGridUrl: baseURL + '/scripts/get_user_list.php' + urlString,
    subGridModel: [{
        name: ['Date', 'ID'],
        params: ['CompanyId'],
        align: ['center', 'right'],
        width: [150, 80]
    }
    ],

    ondblClickRow: function (id) {
        $('#recId').val(id);
    },


    beforeRequest: function () {
        blnGridLoading = true;
        // console.log("beforeRequest(); setting blnGridLoading=true");
        fnValidateAccount(); // Check that user has data available
    },
    loadComplete: function () {

        $(':checkbox').each(function () {
            var status = localStorage.getItem(this.id) === "false" ? false : true;
            $(this).prop("checked", status);
        });

        blnGridLoading = false;
        // console.log("loadcomplete(); setting
        blnGridLoading = false;
        // ");

        for (swap in arySwap) {
            if (typeof arySwap[swap]['CompanyId'] != 'undefined') {

                $("#list").jqGrid('setSelection', arySwap[swap]['CompanyId']); // select companyId
            }
        }
        fnValidateAccount(); // Check that user has data available

    },
});

Вот localStorage.getItem в loadComplate, изолированный от остальной части кода:

$(':checkbox').each(function () {
    var status = localStorage.getItem(this.id) === "false" ? false : true;
    $(this).prop("checked", status);
});

Вот что я пробовал для setItem и где я нахожусьне уверен, где это разместить или если это правильный путь.

$(':checkbox').on('change', function () {
    //set the check value of checkbox
    localStorage.setItem(this.id, this.checked);
});

Answer 1

Размещение

Ваше текущее размещение getItem правильно. Вы должны поставить туда блок setItem. Внутри loadComplete, что означает, что после загрузки jqGrid будут выполняться ваши getItem, а также события setItem будут привязаны к флажкам.

механизм локального хранения

localStorage поддерживает только сохранение пар ключ-значение, и значения могут быть только String. Это означает, что если вы установите ключ customCheckbox на true и выполните запрос для этого ключа, возвращаемое значение будет "true"

localStorage.setItem('test', true); // item set
localStorage.getItem('test') // returns "true"; string, not boolean.

Однако есть способ определить один ключ и сохранить объект для него. Вы должны использовать JSON.stringify() перед сохранением и JSON.parse() после извлечения.

let person = {name: 'John', age: 30, weight: 60} // a pure object.
localStorage.setItem('testPerson', JSON.stringify(person)); // object stringified;

localStorage.getItem('testPerson') // returns a stringified version of 'person' object;

// to use the stored stringified object like a regular object, you need to parse it.
person = JSON.parse(localStorage.getItem('testPerson'));

В вашем коде

Вы использовали разные ключи для каждого флажка, поэтому ваши ключи и значения широко открыты для всего сценария или какого-либо другого сценария на одной странице. Вы можете случайно удалить или изменить значения этих клавиш, или , возможно, не . Также другие страницы могут изменять эти элементы, так как они находятся в localStorage. Поэтому постарайтесь установить как можно более уникальные ключи.

Примечание : откройте инспектор браузера и откройте вкладку storage, чтобы проверить статус localStorage, слева может быть панель с sessionStorage и localStorage

Logic

Теперь давайте поговорим о вашей текущей логике. Похоже, при начальной загрузке страницы, когда нет ключей с localStorage, все ваши флажки будут отмечены. Это предназначено?

Даже если это так, давайте разберемся:

var status = localStorage.getItem(this.id) === "false" ? false : true;

localStorage.getItem('key') вернет null, если такой ключ не установлен. поэтому null === "false" возвращает false и ваша троичная логика устанавливает status в true

Таким образом:

$(this).prop("checked", status); // sets all the checkboxes to checked at initial page load;

Что вы должны сделать, это:

• Проверьте, возвращает ли запрос ключа значение с типом object, поскольку ноль является типом object
• Если это объект, немедленно установите status в false. потому что когда вы установите значение true или false, это будет строковый тип, а не объект.
• Если это не тип объекта, проверьте значение по сравнению с 'true' и 'false' и установите его соответствующим образом.

Вот последняя логика:

let status = typeof localStorage.getItem($(this).attr('id')) === 'object' ? false : localStorage.getItem($(this).attr('id')) === 'true';

Отрывок

Наконец, немного кода, взгляните на фрагмент, Обратите внимание, что браузер выдаст ошибку, потому что iframe пытается изменить localStorage. но извлеките код на вашем конце, чтобы просмотреть результаты.

$(document).ready(function() {
  $(':checkbox').each(function() {
    let status = typeof localStorage.getItem($(this).attr('id')) === 'object' ? false : localStorage.getItem($(this).attr('id')) === 'true';
    $(this).prop('checked', status);
    // console.log(status, typeof localStorage.getItem($(this).attr('id')))
  });

  // setItem.

  $(':checkbox').on('change', function() {
    //set the check value of checkbox
    localStorage.setItem($(this).attr('id'), $(this).prop('checked'));
    console.log('updated, ', $(this).attr('id'));
    console.log(localStorage);
  });

  $('#clear').on('click', function() {
    localStorage.clear();
  });
});

h3 {
  margin: 40px 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>


<div class="container">
  <div class="row">
    <div class="col-12">
      <h3>Checkboxes status to LocalStorage</h3>
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">One</label>
      </div>
    </div>
    <div class="col-12">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck2">
        <label class="custom-control-label" for="customCheck2">Two</label>
      </div>
    </div>
    <div class="col-12">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck3">
        <label class="custom-control-label" for="customCheck3">Three</label>
      </div>
    </div>
    <div class="col-12">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck4">
        <label class="custom-control-label" for="customCheck4">Four</label>
      </div>
    </div>
    <div class="col-12">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck5">
        <label class="custom-control-label" for="customCheck5">Five</label>
      </div>
    </div>
    <div class="col-12">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck6">
        <label class="custom-control-label" for="customCheck6">Six</label>
      </div>
    </div>
    <div class="col-12">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck7">
        <label class="custom-control-label" for="customCheck7">Seven</label>
      </div>
    </div>
    <div class="col-12">
      <div class="form-group"></div>
      <button id="clear" type="button" class="btn btn-danger">Clear LocalStorage</button>
    </div>
  </div>
</div>