locked
Extract Formview field values,insert into Web Storage. RRS feed

  • Question

  • User1909155429 posted

    I would like to be able to get and add Formview field values into  Webstorage.

    eg: Title,Colour,Size,Date ect

    Then on another page retrieve those stored values,add to Listbox in a recognised format. ready to be processed by selection.

    Thanks

    Monday, September 28, 2020 1:42 PM

Answers

  • User475983607 posted

    I actually obtain the key/value from formview in string format!. the example was for illustration purpose. What i wanted to know is why does the for iteration loop not present data proper,as wanted?

    All i want to know is the correct code for data output?

    You have to understand, the code you've shared has bugs and does not follow openly published specifications.  Local storage stores name value pairs as strings not objects or object arrays. 

    Your loop example has syntax errors and does not run.  I fixed the bug and the code works exactly as written.  The code fetches a string value by key. Next, the code loops over every character in the string.  If you want to store complex data in local storage then you'll need to serialize/deserialize a JSON object.  

    Looking at your code, it certainly seems like you do not understand how local storage works. 

    The openly published documentation has source code that illustrates how to loop over local storage keys by index; https://developer.mozilla.org/en-US/docs/Web/API/Storage/key

    The following code writes the key values to the console.

    for (var i = 0; i < localStorage.length; i++) {
        console.log(localStorage.getItem(localStorage.key(i)));
    }

    This code code writes local storage to a dictionary object.

    var myObj = {};
    
    for (var i = 0; i < localStorage.length; i++) {
        myObj[localStorage.key(i)] = localStorage.getItem(localStorage.key(i));
    }
    console.log(myObj);

    Finally, this code serializes/deserializes a JSON object JSON to/from local storage.

    var data = [
        {
            id: 1,
            name: "Hello"
        },
        {
            id: 2,
            name: "World"
        }
    ];
    
    localStorage.setItem('data', JSON.stringify(data));
    
    var mydata = JSON.parse(localStorage.getItem('data'));
    console.log(mydata);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 30, 2020 12:07 PM

All replies

  • User475983607 posted

    What "web storage" are you referring to?  Storage in the browser? 

    Share your code.   Explain the expected results and the actual results. 

    Monday, September 28, 2020 1:47 PM
  • User1909155429 posted

    I wanted some idea of how to go about it the right way,so i can then start, instead of experimenting at this initial stage. 

    Maybe later i will be in a position to engage with the community on further developments and best practice.

    I refer to the local web storage on client.

    Tuesday, September 29, 2020 2:31 PM
  • User475983607 posted

    I wanted some idea of how to go about it the right way,so i can then start, instead of experimenting at this initial stage. 

    Maybe later i will be in a position to engage with the community on further developments and best practice.

    I refer to the local web storage on client.

    The FormView HTML is bound and generated on the web server.  Local storage is located in the browser.  Your design approach requires a double post back to render the FromView on the server or JavaScript code to render the FormView HTML.  If you took a few minutes to investigate the design you would have found quickly the design approach is over complex.

    The standard design approach used in all beginning level tutorials is passing an ID in the URL to the next page.  The page read the ID and looks up the information.  Standard caching is used if fetching the data is expensive or difficult. 

      

    Tuesday, September 29, 2020 2:51 PM
  • User1909155429 posted

    I have managed to capture data as shown:

     function noBack(obj) {
     var id = document.getElementById("Label5").innerHTML;
    
             var myArray = {};
         myArray.title = "test";
        myArray.quantity = 5;
      
         localStorage.setItem(id, myArray);

    }

    But i cant retrieve the myArray data from other page using:

      function addOption_list(){
        var key = "";
        var i = 0;
      
        for (i = 0; i <= localStorage.length - 1; i++) {
            key = localStorage.key(i);
     for (var ke in localStorage.getItem(key) ) {
       alert(localStorage.getItem(key)[ke]);
    localStorage.getItem(key)[ke]);
            }
    
        
        }
    }

    i end up with a list of individual characters as opposed to text?

    Tuesday, September 29, 2020 8:31 PM
  • User475983607 posted

    You are not following the openly published specifications.   Local storage uses name/value pairs; strings.

    The keys and the values are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

    https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

    Tuesday, September 29, 2020 9:20 PM
  • User1909155429 posted

    I actually obtain the key/value from formview in string format!. the example was for illustration purpose. What i wanted to know is why does the for iteration loop not present data proper,as wanted?

    All i want to know is the correct code for data output?

    Tuesday, September 29, 2020 10:22 PM
  • User475983607 posted

    I actually obtain the key/value from formview in string format!. the example was for illustration purpose. What i wanted to know is why does the for iteration loop not present data proper,as wanted?

    All i want to know is the correct code for data output?

    You have to understand, the code you've shared has bugs and does not follow openly published specifications.  Local storage stores name value pairs as strings not objects or object arrays. 

    Your loop example has syntax errors and does not run.  I fixed the bug and the code works exactly as written.  The code fetches a string value by key. Next, the code loops over every character in the string.  If you want to store complex data in local storage then you'll need to serialize/deserialize a JSON object.  

    Looking at your code, it certainly seems like you do not understand how local storage works. 

    The openly published documentation has source code that illustrates how to loop over local storage keys by index; https://developer.mozilla.org/en-US/docs/Web/API/Storage/key

    The following code writes the key values to the console.

    for (var i = 0; i < localStorage.length; i++) {
        console.log(localStorage.getItem(localStorage.key(i)));
    }

    This code code writes local storage to a dictionary object.

    var myObj = {};
    
    for (var i = 0; i < localStorage.length; i++) {
        myObj[localStorage.key(i)] = localStorage.getItem(localStorage.key(i));
    }
    console.log(myObj);

    Finally, this code serializes/deserializes a JSON object JSON to/from local storage.

    var data = [
        {
            id: 1,
            name: "Hello"
        },
        {
            id: 2,
            name: "World"
        }
    ];
    
    localStorage.setItem('data', JSON.stringify(data));
    
    var mydata = JSON.parse(localStorage.getItem('data'));
    console.log(mydata);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 30, 2020 12:07 PM
  • User1909155429 posted

    That seems to be the answer to suit my requirements. i guess i can access output via mydata[id] inside for loop.

    I will have to swop key data for primary key id and include date and title properties in string array. For i need to access both title and the date; test for expire in one month then remove item if condition is true.

    I tried that url many times and cannot access the page content?

    Thanks

    Wednesday, September 30, 2020 1:57 PM
  • User1909155429 posted

    I have a problem. I cannot retrieve the name attribute out of the array, only the values?

     var val = JSON.parse(localStorage.getItem(key));
       
    
            for (var ke in val) {
    
                list += val[ke]['title'] +" ";

    Wednesday, September 30, 2020 5:09 PM
  • User475983607 posted

    I'm guessing you are trying to loop over object properties.  

    for (const [key, value] of Object.entries(mydata)) {
        console.log(key, value);
    }

    As requested in many of your threads, it far more helpful if you share code the community can run.  Otherwise we have no idea where the bugs are in your code.

    Wednesday, September 30, 2020 6:52 PM
  • User1909155429 posted

    I believe it is the same as array uses integer values to reference value?

    Another problem i encountered while following an example with the object array is with functions like example:

       var myArray = {
             title: intextput, 
                   desc: desc,
             category: category, 
          
      FullDesc : function() {
                 return this.title + " ("+  this.desc + "" + this.category + ")";
               }
         };
     for (i = 0; i <= localStorage.length - 1; i++) {
            key = localStorage.key(i);
            var val = JSON.parse(localStorage.getItem(key));
    
    val.desc;
    val.FullDesc;

    The desc returns correct value but FullDesc does not? but it does when loop through myArray.FullDesc.

    Sunday, October 4, 2020 2:26 PM
  • User475983607 posted

    You still have not provided all the relevant code making it impossible to figure out where the bugs are located in your code.  Below is my best guess for a working example.

    <div>
        <input id="SetLocalStorage" type="button" value="Set" />
    </div>
    <div>
        <input id="GetLocalStorage" type="button" value="Get" />
    </div>
    <script>
    
            var intextput = "My Title";
            var desc = "A description";
            var category = "category";
    
            var myArray = {
                title: intextput,
                desc: desc,
                category: category,
    
                FullDesc: function () {
                    return this.title + " (" + this.desc + " and " + this.category + ")";
                }
            };
    
            $('#SetLocalStorage').click(function () {
                localStorage.setItem('data', JSON.stringify(myArray));          
            });
    
            $('#GetLocalStorage').click(function () {
                var mydata = JSON.parse(localStorage.getItem('data'));
                console.log(mydata);
                console.log(myArray.FullDesc());
            });
    
    
        </script>

    Sunday, October 4, 2020 9:04 PM
  • User1909155429 posted

    The problem with that code is the data for myArray is added on a different page. I got is working now! Although

     I add the data to a listbox but unable to style the string content. It would be better in a control where i could format the string.But i dont suppose i can bind the LocalStorage data to a repeater for example ?

    Wednesday, October 7, 2020 1:10 PM
  • User475983607 posted

    The problem with that code is the data for myArray is added on a different page. I got is working now! Although

     I add the data to a listbox but unable to style the string content. It would be better in a control where i could format the string.But i dont suppose i can bind the LocalStorage data to a repeater for example ?

    I clearly and openly explained the hazards of this approach using a Web Forms ListBox in another one of your threads.  IMHO, a fundamentally poor design choice due to how web forms data bound controls works and how websites works.  It seems you have to go through the exercise to come to the same conclusion.

    The typical solution for sharing information between pages in Web Forms is passing an ID in the URL then looking up the data in the target page.

    Wednesday, October 7, 2020 1:26 PM