Question 256935 in Html Question posted in
Some basic documentation can be found here.

Html – How can i save document body edits across refresh page?

I have a javascript bookmarklet that lets me edit a pages body:
document.body.contentEditable = true;

I would like to make a bookmarklet that allows me to save these edits so if i refresh the page it will keep them, or dipslay them when i click the bookmarklet.

I know local Storage exists, but im not sure how to update corresponding elements using local Storage.

Any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found a way. Using Javascript i can just save the entire HTML body, then load that and replace the pages original content with the saved HTML.

    It uses an IF check to see if the page is currently editable, then it will save the data. If it is not editable, then is will load that data.

    The Javascript:

    javascript:(function() {
  // Check if content is editable
  if (document.body.isContentEditable) {
    // Save the edited content to localStorage
    localStorage.setItem('editedContent', document.body.innerHTML);
    alert('Changes saved!');
  } else {
    // Load saved content from localStorage
    var savedContent = localStorage.getItem('editedContent');
    if (savedContent !== null) {
      // Set the saved content to the page's body
      document.body.innerHTML = savedContent;
      document.body.contentEditable = true;
    } else {
      alert('No saved content found.');
    }
  }
})();

    the actuall bookmarklet:

    javascript:(function()%7Bjavascript%3A(function() %7B%0A  %2F%2F Check if content is editable%0A  if (document.body.isContentEditable) %7B%0A    %2F%2F Save the edited content to localStorage%0A    localStorage.setItem('editedContent'%2C document.body.innerHTML)%3B%0A    alert('Changes saved!')%3B%0A  %7D else %7B%0A    %2F%2F Load saved content from localStorage%0A    var savedContent %3D localStorage.getItem('editedContent')%3B%0A    if (savedContent !%3D%3D null) %7B%0A      %2F%2F Set the saved content to the page's body%0A      document.body.innerHTML %3D savedContent%3B%0A      document.body.contentEditable %3D true%3B%0A    %7D else %7B%0A      alert('No saved content found.')%3B%0A    %7D%0A  %7D%0A%7D)()%3B%7D)()%3B```

  2. 0

    Here’s ChatGPT 3.5’s exact response to that question.
    To save document body edits across page refreshes in a web application, you typically need to use some form of data persistence. There are several ways to achieve this, depending on your requirements and the technology stack you are using. Here are some common methods:

    1. Local Storage: You can use the localStorage or sessionStorage APIs in JavaScript to store data on the client-side. This data will persist even if the page is refreshed. Here’s a simplified example:

      // Save data to local storage
localStorage.setItem('documentContent', document.body.innerHTML);

// Retrieve data from local storage
var savedContent = localStorage.getItem('documentContent');
if (savedContent) {
  document.body.innerHTML = savedContent;
}

      Be cautious when using local storage for sensitive information, as it’s accessible to JavaScript on the same domain.

    2. Cookies: You can use cookies to store small amounts of data on the client’s browser. Cookies are sent with every HTTP request to your website. However, they have size limitations and are not suitable for storing large document bodies.

    3. Server-Side Storage: If you need to store larger or more critical data, consider saving it on the server. When a user edits the document, send the changes to the server and store them in a database. When the page is refreshed, retrieve the data from the server and populate the document with the saved content.

      To implement this, you would typically use a server-side language (e.g., PHP, Python, Node.js) and a database (e.g., MySQL, MongoDB) to store and retrieve the document content.

    4. Web Storage APIs: Alongside local storage and session storage, you can use newer web storage technologies like IndexedDB or WebSQL for more advanced client-side storage needs. These are more powerful but have steeper learning curves.

    5. Client-Side Frameworks: If you’re using a JavaScript framework like React, Angular, or Vue.js, you can manage state within the application and persist data across refreshes using their built-in state management and data storage mechanisms.

    6. Cookies: You can use cookies to store small pieces of data on the client-side. However, they have size limitations and are not suitable for storing large document bodies.

    Remember that the choice of method depends on your specific use case, such as the size of the document content, security requirements, and whether you need to synchronize the data across multiple devices or users. Each method has its pros and cons, so choose the one that best fits your needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search