如何在按钮单击时动态更新本地存储中的值?

时间:2016-03-18 04:55:14

标签: javascript jquery html5

这是我用于向本地存储添加值的代码。

    var textval=0;
function addValue(){
    console.log(typeof(localStorage.getItem(textval)));        
    textval= localStorage.length+1;
    var fieldValue = $('#textfield').val(); 
    localStorage.setItem(textval, fieldValue);
    textval = 0;
}

现在,如果我想编辑本地存储中的值,该怎么办?

My HTML code used for updation lies below:-
<input class="form-control" id="ex2" type="text" placeholder="Enter the key"><br>
<input class="form-control" id="ex21" type="text" placeholder="Enter the updated value"><br>
<button type="button" class="btn btn-primary"    onClick="editValue();">Enter</button>

当我在文本框中指定密钥和更新值后单击Enter按钮时,这些更改应反映在我的本地存储中。我必须为此做什么? 请帮助我。谢谢你。

1 个答案:

答案 0 :(得分:0)

尝试使用select和以下editValue函数

<div class="parent">
<select class="form-control" id="ex2" name="key"></select><br>
<input class="form-control" id="ex21" type="text" placeholder="Enter the updated value"><br>
<button type="button" class="btn btn-primary"    onClick="editValue();">Enter</button>
</div>

JS:

 for (var i = 0; i < localStorage.length; i++) {
    $('#ex2').append('<option value="'+localStorage.key(i)+'">'+localStorage.key(i)+'</option>');
  };

function editValue() {
   var key = $(this).closest('.parent').find('option:selected').val();
  localStorage.setItem(key,$(this).closest('.parent').find('input[type="text"]').val());
}