Question

1.如何从此输入中获取值

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

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

我想用删除图标选项附加它，所以当我点击它时，它将是localStorage.removeItem（）;来自DOM而不刷新页面。

Answer 1

刷新：

Exmaple storage local，抱歉没有时间扩展版本（稍后会做）：

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小提琴。

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

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插件编写，但认为这可能需要更长时间），但它完成了同样的工作。

jQuery localStorage无需刷新页面

2 个答案: