Andrei Deinichenko Andrei Deinichenko - 1 year ago 73
HTML Question

Recording of anonymous edits of text on page

In the following code, I am allowing users to edit text content, save and recall changes from own "local storage". So every editor's browser "remembers" their own editing, and each editor sees his changes only. I want to realise an idea of the anonymous wiki and import every user edits and display the last one in the final HTML page.

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>

<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">
@import url('');

<body onload="checkEdits()">

Indexmod Россия

<div id="edit" contenteditable="true">
Here is Indexmod Encyclopedia anonymous real-time editing sandbox area


<input type="button" id=button value="Сохранить" onclick="saveEdits()" />

<div id="update">Редактируй текст и нажми сохранить до следующего раза</div>

<p class="footer" id="footer"><span><script src="footer.js"></script></span>



Answer Source

While you're going to set item on local storage, the method goes to:

localStorage.setItem('userEdits', userVersion);

And get item


Hope it would be helps, This works for me.

See the reference: