jQuery localStorage 不刷新页面

Question

1.我怎样才能从这个输入中得到一个值

<input type="text"></input>

使用 localStorage 将其附加到 DOM 中，即使页面刷新也会保存。

1. 我想给它附加一个删除图标选项，所以当我点击它时，它将 localStorage.removeItem();在不刷新页面的情况下从 DOM 获取。

Answer 1

刷新：

示例存储本地，抱歉没有时间扩展版本（稍后会做）：

var dogname = "Skippy";
localStorage.setItem("dog", dogname);
var dogLocal = localStorage.getItem("dog");
$("#dog").html(dogLocal);

http://jsfiddle.net/Andelhofs/59dsL7s8/1/

Answer 2

我怀疑您正在尝试执行类似于 SO 中的标记功能的操作，即您使用关键术语标记问题，添加它们，然后您可以选择删除它们。那是对的吗？如果是这样，请查看我在 http://jsfiddle.net/u7tkoo6n/ 上写的快速 JS Fiddle。

由于我必须在上面的链接中附上代码，所以这里是：

HTML：

<form>
    <input type="text" id="name" name="name" />
    <input type="submit" value="Add" id="addName" />
</form>
<div class="names-panel"></div>

jQuery:

$(document).ready(function() {
    $("#addName").click(function(e) { // On click of the button
        var val = $("#name").val(); // Get the current value
        if(val) {
            $("#name").val(""); // Blank out the text input
            var names = localStorage.getItem("names");
            if(names) {
                names += "," + val;
            } else {
                names = val;
            }
            localStorage.setItem("names", names);
            updateNames();
        }
        e.preventDefault();
        return false;
    });
    updateNames();
});

function updateNames() {
    var names = localStorage.getItem("names");
    if(names) {
        names = names.split(",");
        $(".names-panel").html("");
        for(var i = 0; i < names.length; i++) {
            var item = $("<span class=\"item\">" + names[i] + "<span class=\"ui-icon ui-icon-close\" data-name=\"" + names[i] + "\"></span></span>");
            item.find(".ui-icon-close").click(function() {
                var currentName = $(this).data("name");
                var names = localStorage.getItem("names");
                names = names.split(",");
                var position = names.indexOf(currentName);
                if(position > -1) names.splice(position, 1);
                names = names.join();
                localStorage.setItem("names", names);
                updateNames();
            });
            $(".names-panel").append(item);
        }
    }
}

CSS（纯粹是为了外观）：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=text] {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.item {
    display: inline-block;
    width: auto;
    border: 1px solid #ccc;
    background-color: #eee;
    padding: 3px 40px 3px 8px;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 5px 5px 5px 0;

    position: relative;
}

.item .ui-icon {
    position: absolute;
    right: 0;
    top: 3px;
}

.item .ui-icon.ui-icon-close {
    cursor: pointer;
}

它可以写得更好（我有一半倾向于将它写成一个 jQuery UI 插件，但认为这可能需要更长的时间）但它的工作都是一样的。