将值从Span ID保存到本地存储HTML5

Question

created a jsfiddle where im trying to get the value (800) thats created by the up and down buttons to save locally

however the example keeps saving out the key and value in the text box

http://jsfiddle.net/HMEVd/143/

var prefix = "";
$("#power_save").click(function () { 
var key = $("#key").attr('value');
var value = $("#value").attr('value');
var power_save = $("#CountedClicks").attr('value');
localStorage.setItem(prefix + key, value, power);      //******* setItem()
//localStorage[prefix+key] = value; also works
RewriteFromStorage();
});

function RewriteFromStorage() {
$("#data").empty();
for(var i = 0; i < localStorage.length; i++)    //******* length
{
    var key = localStorage.key(i);              //******* key()
    if(key.indexOf(prefix) == 0) {
        var CountedClicks = localStorage.getItem(key);  //******* getItem()
        //var value = localStorage[key]; also works
        var shortkey = key.replace(prefix, "");
        $("#data").append(
            $("<div class='kvp'>").html(shortkey + "=" + value)
               .append($("<input type='button' value='Delete'>")
                       .attr('key', key)
                       .click(function() {      //****** removeItem()
                            localStorage.removeItem($(this).attr('key'));
                            RewriteFromStorage();
                        })
                      )
        );
    }
}
}

RewriteFromStorage();

How can i get it so that:

1.The KEY is predefined such as POWER? 2. VALUE saved out is the countedclicks ie the number that changes with the up and down button?

Answer 1

You are using setItem() incorrectly, it takes one key and one value:

  [NameSetter] void setItem(in DOMString key, in DOMString data);

ref: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

If you want to use the same key to access both values, you could simply put them in an array:

  localStorage.setItem(prefix + key, [value, power]);   

Then you would access them via:

  value = localStorage.getItem(prefix + key)[0];
  power = localStorage.getItem(prefix + key)[1];

Alternatively you could simply use two different keys for two separate entries.