Sudheer
Sudheer

Reputation: 71

Saving data in div after page refresh

I am creating a search bar where the user can select parameters which creates a chip in the search bar. This chip will be created dynamically for every selection in a div with the class name 'chips'. After submitting the selection, the page redirects based on the selection. As the chips were dynamically created, they will be deleted on page reload. My question: Is there a way to store this dynamic data without deleting it after the page refresh?

  <div class="chips" id="createdChips" >
         <span> class ='someclass' </span>
         <span> class ='someclass' </span>          
  </div>

Upvotes: 3

Views: 1178

Answers (2)

plop
plop

Reputation: 88

delete on browser close:

// Store item
sessionStorage.setItem('example', 'some item');

// Get Item
sessionStorage.getItem('example') // 'some item'

// Remove Item
sessionStorage.remove('example');

// Remove all items
sessionStorage.clear();

never be deleted unless the user clears website data (through browser settings):

// Store item
localStorage.setItem('example', 'some item');

// Get Item
localStorage.getItem('example') // 'some item'

// Remove Item
localStorage.remove('example');

Upvotes: 2

Ashycre
Ashycre

Reputation: 57

You can store your dynamically created data in cookies or session storage. When your page load, search if there's data stored in above storage and draw the chips based on data.

Upvotes: 3

Related Questions