将html元素从变量保存到会话存储并检索它-jQuery

我正在尝试将此角色变量和填充的选择选项保存到sessionStorage

 var newRoleCounter = 0; 

  function  createClientRoleContainer(allPartnersOrClients) {
     var role = $(`<div id="cr" class="client-role"><div class="row"><div class="col s4 input-field clients-select" id="clients-select">
                      <select class="js-select clients-new" name="client-for-role" id="entity-edit">
                   </select><label for="entity-edit-label" class="active" id="clients-select-label">Client</label>
                  </div><div class="col s4 input-field"><select class="js-select" id=""><option value="" disabled selected>Choose role</option></select>
                  <label for="" class="active">Role</label></div><a class="language-group-remove p-t-8"><span class="icon s24">delete</span>Remove</a></div>
                  </div>`);

       Object.keys(allPartnersOrClients).forEach(function (key) {
        role.find('#entity-edit').append(new Option(allPartnersOrClients[key], key));
    });

      sessionStorage.setItem("role", JSON.stringify(role));
}

但将其存储到sessionStorage后无法读取或更改id值

 var newRoleCounter = 0; 

  function  createClientRoleContainer(allPartnersOrClients) {
     var role = $(`<div id="cr" class="client-role"><div class="row"><div class="col s4 input-field clients-select" id="clients-select">
                      <select class="js-select clients-new" name="client-for-role" id="entity-edit">
                   </select><label for="entity-edit-label" class="active" id="clients-select-label">Client</label>
                  </div><div class="col s4 input-field"><select class="js-select" id=""><option value="" disabled selected>Choose role</option></select>
                  <label for="" class="active">Role</label></div><a class="language-group-remove p-t-8"><span class="icon s24">delete</span>Remove</a></div>
                  </div>`);

       Object.keys(allPartnersOrClients).forEach(function (key) {
        role.find('#entity-edit').append(new Option(allPartnersOrClients[key], key));
    });

      sessionStorage.setItem("role", JSON.stringify(role));
}

结果是：

role:
0: {}
length: 1
__proto__: Object
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

---

我强烈建议您在localStorage中存储序列化数据结构，而不是文本HTML字符串。JSON非常适合这一点。你能给我一个这个特定问题的例子吗？我在将其存储到sessionStorage之前对其进行字符串化，但在检索时无法读取结果…然后检索它

JSON.parse（）

it