How to allow users to edit content of webpage and save it for all viewers? [closed]

There are many aspects to your question. First, you may need a registration/login system. For that, you will need both front-end (javascript/jQuery) and back-end (PHP) programming.

If you have a login system, you should learn about PHP sessions.

You will need to read/write into a database. This would be back-end (PHP). Many tutorials currently cover only the older mysql_ commands; you must learn either mysqli_ or PDO format (as the older style still works but is deprecated).

You should learn jQuery and javascript. jQuery will be very helpful, and don’t listen to those who say you must learn javascript first — I didn’t and I am now filling-in what I missed about javascript after having designed numerous sites.

There are many places to find tutorials, but I can recommend these:

1. PHPAcademy.org – used to be free, but is now just low-priced
   Registration and Login tutorial
   PHP and MySQL with PDO and mysqli_

2. TheNewBoston.com — try this one:
   Project Lisa – Unfinished tutorial but very good
   Intro to PHP
   Intro to jQuery

---

You are correct that the example you posted only saves edits for the current user (and for future visits by that same user). The changes are saved on the user’s local computer, not on the server. The easiest way to store edits on the server is to write them to a database, such as MySQL.

---

Here is an example of why you might prefer to learn jQuery over plain javascript:

The javascript way:

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!";

}

The jQuery way:

function saveEdits() {
    //get the edited element content
    var userVersion = $("#edit").var();

    //save the content to local storage
    localStorage.userEdits = userVersion;

    //write a confirmation to the user
    $("#update").val("Edits saved!");

}

Much less typing — especially over an entire project — using the jQuery way. Also, jQuery takes care of all cross-browser issues for you. With javascript you must code for each browser yourself. For most developers, jQuery is faster and easier.