Setting and getting localStorage with jQuery

Question

I am trying out localStorage and attempting at getting text from a div and storing it in localStorage  however  it sets it as an  object Object  and returns  object Object   Why is this happening    x000D   x000D  localStorage content       test   html  Test    x000D   x000D      test   html localStorage content   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  test  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Use setItem and getItem if you want to write simple strings to localStorage  Also you should be using text   if it s the text you re after as you say  else you will get the full HTML as a string   Sample using  text       get the text var text       test   text        set the item in localStorage localStorage setItem  test   text       alert the value to check if we got it alert localStorage getItem  test       JSFiddle  https   jsfiddle net f3zLa3zc     Storing the HTML itself     get html var html       test   0  outerHTML      set localstorage localStorage setItem  htmltest   html       test if it works alert localStorage getItem  htmltest       JSFiddle  https   jsfiddle net psfL82q3 1     Update on user comment  A user want to update the localStorage when the div s content changes  Since it s unclear how the div contents changes  ajax  other method   contenteditable and blur   is used to change the contents of the div and overwrite the old localStorage entry      get the text var text       test   text        set the item in localStorage localStorage setItem  test   text       bind text to  blur  event for div     test   on  blur   function             check the new text     var newText     this  text            overwrite the old text     localStorage setItem  test   newText           test if it works     alert localStorage getItem  test            If we were using ajax we would instead trigger the function it via the function responsible for updating the contents   JSFiddle  https   jsfiddle net g1b8m1fc

User · Answer

You said you are attempting to get the text from a div and store it on local storage  Please Note  Text and Html are different  In the question you mentioned text   html   will return Html content like  lt a gt example lt  a gt   if you want to get Text content then you have to use text   instead of html   then the result will be example instead of  lt a gt example lt a gt   Anyway  I am using your terminology let it be Text  Step 1  get the text from div  what you did is not get the text from div but set the text to a div      test   html  quot Test quot      is actually setting text to div and the output will be a jQuery object  That is why it sets it as  object Object   To get the text you have to write like this     test   html    This will return a string not an object so the result will be Test in your case  Step 2  set it to local storage  Your approach is correct and you can write it as localStorage key value  But the preferred approach is localStorage setItem key value   to set localStorage getItem key   to get  key and value must be strings  so in your context code will become     test   html  quot Test quot    localStorage content       test   html        test   html localStorage content    But I don t find any meaning in your code  Because you want to get the text from div and store it on local storage  And again you are reading the same from local storage and set to div   just like a 10  b a  a b  If you are facing any other problems please update your question accordingly

User · Answer

The localStorage can only store string content and you are trying to store a jQuery object since html htmlString  returns a jQuery object   You need to set the string content instead of an object  And use the setItem method to add data and getItem to get data   window localStorage setItem  content    Test        test   html window localStorage getItem  content

[javascript] Setting and getting localStorage with jQuery

Sample using .text()

Storing the HTML itself

Update on user comment

Examples related to javascript

Examples related to jquery

Examples related to local-storage