CODEWITHSUNDEEP
javascriptjquerylocal-storage
jerneva
jerneva

Reputation: 465

How to save jQuery into local storage

I have an add element function, which works perfectly. I just have no idea how to add this function into localstorage. Very new, could you please give a explanation?

$(document).on('click', 'li#order_open', function(){      
    $(this).before('<li><a href="Menu.php">New restaurant</a></li>');          
    // add to localsorage?                      
    var order_open = $('li#order_open').html();
    localStorage.setItem('li#order_open', order_open);
    localStorage.setItem($(this));
});

Upvotes: 2

Views: 2103

Answers (1)

Drew Gaynor
Drew Gaynor

Reputation: 8472

What you have could be used. You can save the markup to local storage, and later retrieve it and add it back to the DOM.

Note that this snippet will not run within the answer, as the sandboxed frame cannot access localStorage.

function appendFromLocal() {
  //This is just for demonstration purposes
  $(document.body).append(localStorage.getItem('div'));
  
  //This is what could be used to reload the element on page load
  //$('div').html(localStorage.getItem('div'))
}

function addNewItem() {
  $('ul').append('<li><a href="Menu.php">New restaurant</a></li>');
  
  var order_open = $('div').html();
  localStorage.setItem('div', order_open);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="appendFromLocal()">Append From Local Storage</button>
<button onclick="addNewItem()">Add New Item</button>

<div>
  <ul>
    <li><a href="Menu.php">New restaurant</a></li>
  </ul>
</div>

Upvotes: 2

Related Questions