Question

在下面的代码中，我允许用户编辑文本内容，保存和调用自己的“本地存储”中的更改。因此，每个编辑的浏览器都“记住”他们自己的编辑，每个编辑只看到他的更改。我想实现匿名维基的想法并导入每个用户编辑并在最终的HTML页面中显示最后一个。

function saveEdits() {

    //get the editable element
    var editElem = document.getElementById("edit");

    //get the edited element content
    var userVersion = editElem.innerHTML;

    //save the content to local storage
    localStorage.userEdits = userVersion;

    //write a confirmation to the user
    document.getElementById("update").innerHTML = "Готово";

}

function checkEdits() {

    //find out if the user has previously saved edits
    if (localStorage.userEdits !== null)
        document.getElementById("edit").innerHTML = localStorage.userEdits;
}

body {
    display: block;
    padding: 50px;
    margin: 50px;
    width: 90%;
    font-family: 'Oranienbaum', serif;
    font-size: 30px;
    margin-right: 50px;
    height: 90%
}
#edit {
    background-color: white;
    margin: 5px;
    padding: 0px;
    text-align: inherit;
    font-size: 40px;
    font-family: 'Oranienbaum', serif;
}
#button {
    background-color: silver;
    border: none;
    top: 100px;
    margin: 5px;
    padding: 10px;
    font-family: 'Oranienbaum', serif;
    font-size: 20px;
}
#update {
    background-color: white;
    top: 100px;
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

hr {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-style: dashed;
    border-width: 1px;
}

.footer {
    background-color: inherit;
    top: 100px;
    margin: 5px;
    padding: 5px;
    font-size: 10px;
}

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Indexmod Encyclopedia — anonymous real-time editing </title>
    <script src="code.js" type="text/javascript" charset="utf-8"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Oranienbaum');
    </style>
</head>

<body onload="checkEdits()">

    Indexmod Россия

    <hr>
    <div id="edit" contenteditable="true">
        Here is Indexmod Encyclopedia anonymous real-time editing sandbox area
    </div>

    <hr>

    <input type="button" id=button value="Сохранить" onclick="saveEdits()" />

    <div id="update">Редактируй текст и нажми сохранить до следующего раза</div>

    <p class="footer" id="footer"><span><script src="footer.js"></script></span>
    </p>

</body>

</html>

Answer 1

当您要在本地存储设置项目时，方法转到：

localStorage.setItem('userEdits', userVersion);

获取项目

localStorage.getItem('userEdits');

希望它会有所帮助，这对我有用。

参见参考：http://www.w3schools.com/html/html5_webstorage.asp

在页面上记录文本的匿名编辑

1 个答案: