【发布时间】：2020-07-31 09:31:29
【问题描述】：
我正在尝试在 sessionStorage 中设置一个值，但我遇到了一个问题，即如何根据我单击的内容以不同的方式存储 sessionStorage“密钥”。例如在下图中，如果我要单击第一个视图聊天，我将存储一个键“1”，而第二个视图聊天我将存储一个键“2”。这些键值是直接来自下面的 ajax 调用的值。 HTML 元素是根据我在 AJAX“GET”方法调用中的条目数克隆的。因此，每个元素（下面的框）都有一个唯一的 sessionStorage“键”，当我单击该特定框的“查看聊天”时，我想设置它。
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="card card-solid">
<div class="card-body pb-0">
<div id="chatItemBox" class="row d-flex align-items-stretch">
<div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch chatItemBox">
<div class="card bg-light">
<div id="chatItemBoxUsername" class="card-header text-muted border-bottom-0">
Digital Strategist
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col-7">
<h2 class="lead"><b id="chatItemBoxName">Nicole Pearson</b></h2>
<strong><i class="fas fa-envelope mr-1"></i> Email</strong>
<p id="chatItemBoxEmail" class="text-muted">HI
</p>
<hr>
<strong><i class="fas fa-phone mr-1"></i> Contact</strong>
<p id="chatItemBoxContact" class="text-muted">HI
</p>
<hr>
</div>
<div class="col-5 text-center">
<img src="../../dist/img/user1-128x128.jpg" alt="" class="img-circle img-fluid">
</div>
</div>
</div>
<div class="card-footer">
<div class="text-right">
<a href="view-chat.html" class="btn btn-sm bg-teal" onclick="sessionStorage.setItem('chatId', chatId)">
<i class="fas fa-comments"></i> View Chat
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<nav aria-label="Contacts Page Navigation">
<ul class="pagination justify-content-center m-0">
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
</ul>
</nav>
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</section>
<!-- /.content -->
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="card card-solid">
<div class="card-body pb-0">
<div id="chatItemBox" class="row d-flex align-items-stretch">
<div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch chatItemBox">
<div class="card bg-light">
<div id="chatItemBoxUsername" class="card-header text-muted border-bottom-0">
Digital Strategist
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col-7">
<h2 class="lead"><b id="chatItemBoxName">Nicole Pearson</b></h2>
<strong><i class="fas fa-envelope mr-1"></i> Email</strong>
<p id="chatItemBoxEmail" class="text-muted">HI
</p>
<hr>
<strong><i class="fas fa-phone mr-1"></i> Contact</strong>
<p id="chatItemBoxContact" class="text-muted">HI
</p>
<hr>
</div>
<div class="col-5 text-center">
<img src="../../dist/img/user1-128x128.jpg" alt="" class="img-circle img-fluid">
</div>
</div>
</div>
<div class="card-footer">
<div class="text-right">
<a href="view-chat.html" class="btn btn-sm bg-teal" onclick="sessionStorage.setItem('chatId', chatId)">
<i class="fas fa-comments"></i> View Chat
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<nav aria-label="Contacts Page Navigation">
<ul class="pagination justify-content-center m-0">
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item"><a class="page-link" href="#">6</a></li>
<li class="page-item"><a class="page-link" href="#">7</a></li>
<li class="page-item"><a class="page-link" href="#">8</a></li>
</ul>
</nav>
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</section>
<!-- /.content -->
脚本
$.ajax({
url: 'http://localhost:8080/Retail-war/webresources/chat/retrieveChatsForUserForMerchant/' + uId,
type: 'GET',
dataType: 'json',
// Fetch the stored token from localStorage and set in the header
headers: { "Authorization": 'Bearer ' + sessionStorage.getItem('accessToken') },
success: function (data) {
// Get all chatItemBox by class
var chatItemBox = document.getElementsByClassName('chatItemBox');
console.log(chatItemBox)
// Get the last one
var lastChatItemBox = chatItemBox[chatItemBox.length - 1];
count = 0
$.each(data, function (key, entry) {
var chatItemBoxUsername = document.getElementById('chatItemBoxUsername').innerHTML = entry.createdBy.username
var chatItemBoxName = document.getElementById('chatItemBoxName').innerHTML = entry.createdBy.name
var chatItemBoxEmail = document.getElementById('chatItemBoxEmail').innerHTML = entry.createdBy.email
var chatItemBoxContact = document.getElementById('chatItemBoxContact').innerHTML = entry.createdBy.contactNumber
// Clone it
var newChatItemBox = lastChatItemBox.cloneNode(true);
newChatItemBox.className = 'col-12 col-sm-6 col-md-4 d-flex align-items-stretch chatItemBox' + count;
count = count + 1
console.log(newChatItemBox);
document.getElementById('chatItemBox').appendChild(newChatItemBox)
console.log(entry)
})
$('.chatItemBox').attr('id', 'toHide')
$('#toHide').remove();
console.log(data)
},
error: function (xhr, status, err) {
alert(err);
}
});
【问题讨论】：
标签： javascript html css ajax dom