我试图创建一个非常类似于Goodle-Docs的页面,每个访问该页面的人都可以简单地编辑文本。然而,我的问题是,我只能让这些更改保存在本地,我如何让用户编辑内容可编辑的文本,以便更改在所有设备上可见?
我正在使用这个教程,http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/但页面的更改仅保存在本地。
这是我的密码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
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="Edits saved!";
}
function checkEdits() {
//find out if the user has previously saved edits
if(localStorage.userEdits!=null)
document.getElementById("edit").innerHTML = localStorage.userEdits;
}
</script>
</head>
<body onload="checkEdits()">
<div id="edit" contenteditable="true">
Here is the element
</div>
<input type="button" value="save my edits" onclick="saveEdits()"/>
<div id="update"> - Edit the text and click to save for next time</div>
</body>
</html>
您将需要一个后端来同步用户之间的内容,然后使用AJAX轮询每个用户的更改。
就我个人而言,我建议查看这些javascript库和框架,因为它们包含的功能接近于您试图实现的开箱即用功能:ShareJS、Derby和Meteor。
就像Waiski说的...
这很古老,但我想指出。。。
你可以这样做通过localStorage.set项目(//itemname,//内容),然后获取它,localStorage.get项目(//itemname)。你可以暂时这样做,但不推荐。
很好的一天!
p、 由于安全性错误,不允许您在stackoverflow下设置Item,因此此处可能不起作用,但请您自己检查!
<!DOCTYPE html>
<html>
<head>
<script>
var version = 0;
function saveEdits() {
var editElem = document.getElementById("edit");
version = localStorage.getItem("v");
var versionTxt = document.createTextNode("Version " + localStorage.getItem("v"))
document.body.appendChild(versionTxt);
version++
localStorage.setItem("v", version);
localStorage.setItem("Elm", editElem.innerHTML);
document.getElementById("update").innerHTML="Edits saved!";
}
var editedElem = document.getElementById("edit");
var edits = localStorage.getItem("Elm");
editedElem.innerHTML = edits;
</script>
</head>
<body>
<div id="edit" contenteditable="true">
Edit me
</div>
<button onclick="saveEdits()">save edits</button>
<div id="update"> - Edit the text and click to save for next time</div>
</body>
</html>