Question

基本上，我想获取本地存储的项目的值，并将其设置为＆＃39; span＆＃39;的值。标签嵌套在＆＃39; h2＆＃39;标签。您将从我的代码中注意到，每次“测试”时，本地存储的数字都会增加1。单击按钮。我的代码正确存储了数字，但没有更新＆＃39; span＆＃39;标记 - 即使我重新加载页面。另外，我正在使用Bootstrap来代替代码的一部分：）

HTML：

<h2 class="text-center"><span class="single" id="memberCount"></span>    
Members and Counting.</h2>

<button class="btn btn-success" id="test">Test</button>

使用Javascript：

var increment = 23;

$("#memberCount").val(localStorage.getItem("memberCount"));

$("#test").on('click', function () {

     increment++;

     if (typeof localStorage !== 'undefined') {

         localStorage.setItem("memberCount", increment);

     }else {

        alert("Your browser is out of date. Please update.");

     }

});

非常感谢你的帮助！

Answer 1

故事的道德：在span标签上使用.html（），甚至更好的.text（），而不是val（）

'use strict';

var increment = 23;


function setMemberCount(){
    $("#memberCount").html(localStorage.getItem("memberCount"));
}


function doWork(){
     increment++;
     if (typeof localStorage !== 'undefined') {
         localStorage.setItem("memberCount", increment);
          setMemberCount();
     }
    else alert("Your browser is out of date. Please update.");
}

$("#test").on('click', doWork);

http://codepen.io/nicholasabrams/pen/pydRaB

Answer 2

使用.text()或.html()，因为.val()适用于表单操作元素。

var increment = localStorage.memberCount || 23;
$("#memberCount").text( increment );

$("#test").on('click', function () {
  localStorage.memberCount = ++increment;
  $("#memberCount").text( increment );
});

<强> jsBin demo

P.S：不要害怕localStorage http://caniuse.com/#search=localstorage

将本地存储项设置为＆＃39; span＆＃39;的值标签

2 个答案: