如何根据我在HTML中单击的内容设置sessionStorage密钥？

Question

我正在尝试在sessionStorage中设置一个值，但是我面临一个问题，即如何根据所单击的内容以不同的方式存储sessionStorage“密钥”。例如，在下图中，如果我要单击第一个视图聊天，我将存储键“ 1”，第二个视图聊天，我将存储键“ 2”。这些键值是直接来自下面的Ajax调用的值。

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" 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);
        }
    });  

Answer 1

基本上第一个参数是键，第二个参数是sessionStorage.setItem的值

将其用于第一个聊天窗口：

onclick="sessionStorage.setItem('1', chatId)"

将其用于第二个聊天窗口：

onclick="sessionStorage.setItem('1', chatId)"