如何根据我在 HTML 中单击的内容设置 sessionStorage 键？
Posted
技术标签:
【中文标题】如何根据我在 HTML 中单击的内容设置 sessionStorage 键？【英文标题】：How do I set a sessionStorage key based on what I click in HTML? 【发布时间】：2020-07-31 09:31:29 【问题描述】：我正在尝试在 sessionStorage 中设置一个值，但我遇到了一个问题，即如何根据我单击的内容以不同的方式存储 sessionStorage“密钥”。例如在下图中，如果我要单击第一个视图聊天，我将存储一个键“1”，而第二个视图聊天我将存储一个键“2”。这些键值是直接来自下面的 ajax 调用的值。 html 元素是根据我在 AJAX“GET”方法调用中的条目数克隆的。因此，每个元素（下面的框）都有一个唯一的 sessionStorage“键”，当我单击该特定框的“查看聊天”时，我想设置它。
HTML 文件
<!-- 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" 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" 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);
);
【问题讨论】：
【参考方案1】：基本上第一个参数是key，第二个参数是sessionStorage.setItem的值
将此用于第一个聊天窗口：
onclick="sessionStorage.setItem('1', chatId)"
将此用于第二个聊天窗口：
onclick="sessionStorage.setItem('1', chatId)"
【讨论】：
您好，我知道 sessionStorage 是如何工作的，但我对如何根据单击的项目存储不同的密钥感到困惑。我使用了克隆元素，因此很复杂。以上是关于如何根据我在 HTML 中单击的内容设置 sessionStorage 键？的主要内容，如果未能解决你的问题，请参考以下文章
在 Android 应用程序中单击并打开时，分支链接不提供数据
html标签中的iframe，bootstrap我在设计的网页的时候只有150px的高度，如何根据内容自适应高度求解
如何获取单击的选中按钮的视图位置以及如何根据其位置将其设置为选中状态