Author Topic: Local Storage  (Read 11053 times)

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Local Storage
« on: May 09, 2018, 02:21:06 am »
Hi I am trying to save a copy and then pull my data into the object.  I am attempting as per the following:

Step 1 Store the Data...
 //getdata
    var now = Math.floor(Date.now() / 1000);
    var last = localStorage.getItem("SCTCollDataTime");
    console.log(last);
    //Refresh if data is older than 10 minutes 600ms
    if (now - last > 600) {
   var data = $.ajax({
        async: false,
        type: "Get",
        url: '/Collaborate/Get',
        dataType: 'json',
        data: {
            json: JSON.stringify(data)
        },
        success: function (data) {
            localStorage.setItem("SCTCollData", JSON.stringify(data));       
            localStorage.setItem("SCTCollDataTime", Math.floor(Date.now() / 1000)); 
        },
    });
    }


Step 2

Get Item from Storage
1st Attempt:
I had my data formatted using the data: prefix

2nd Attempt:
var sales = JSON.stringify(window.localStorage.getItem('SCTCollData'));

 var dataModel = {
        dataType: "JSON",
        location: "local",
        //location: "local",
        recIndx: "ID",
        Data: { data: sales }
        }

I was able to pull the data in just without having a recIndx defined, I just could not use recIndx which I am trying to log all the changes.

Thanks!

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6307
    • View Profile
Re: Local Storage
« Reply #1 on: May 09, 2018, 10:32:21 am »
1.
Quote
I had my data formatted using the data: prefix

I presume you mean by sales variable.

in that case it would be assigned to grid as

Code: [Select]
var dataModel = {
        dataType: "JSON",
        location: "local",
        //location: "local",
        recIndx: "ID",
        data: sales.data
 }

2.
Quote
I was able to pull the data in just without having a recIndx defined, I just could not use recIndx which I am trying to log all the changes.

recIndx is used in case of tracking changes with batch editing. In this case trackModel: {on: true} should be set. and every row in data should contain one field with name same as defined by dataModel.recIndx i.e., "ID"

Example: https://paramquery.com/pro/demos/editing_batch
« Last Edit: May 09, 2018, 03:56:57 pm by paramquery »

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #2 on: May 09, 2018, 10:59:55 pm »
Awesome, thanks for confirming that this is possible.  I found out why I couldn't see it....  JSON.stringify vs JSON.parse.  Thanks for the response and confirming my insanity!!

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #3 on: May 10, 2018, 12:59:22 am »
NA Solved
« Last Edit: May 10, 2018, 01:49:39 am by mgregory85 »

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #4 on: May 10, 2018, 11:39:10 am »
Hi I am wanting to inquire about multiple grids and the method I am using.

So Step 1 I have local memory assigned.

Grid 1 - Works Great

       var dataModel = {
            dataType: "JSON",
            location: "local",
            recIndx: "ID",
            data: sales.data}

Grid 2 - Works Great
    if (window.localStorage.getItem('sales')) {
     
        var sales= JSON.parse(window.localStorage.getItem('sales'));
        if (data) {
            console.log(data);
            obj2.dataModel = { data: sales.data };       
        }
        grid2 = pq.grid("#grid_json", obj2);   
    }

Now when I make edits to local I call from the main grid to update the JSON stored.

   function updateLocale() {
            var gridChanges = grid.getChanges({ format: 'byVal' });  //getchanges to push over on locale
            var sales= JSON.parse(window.localStorage.getItem('sales')) //obj, keyValue, findKey, findField, newValue

            var updateList = gridChanges.updateList;

            for (var i = 0, len = updateList.length; i < len; i++) {
                for (var property1 in updateList) {
                    if (/^[C]/.test(property1)) {
                        replaceAttributebyKey(SCTCollData, "ID", updateList.ID, property1, parseFloat(updateList[property1]));
                    }
                }
            }
            localStorage.setItem("sales", JSON.stringify(sales));  //put the object back in local     

            grid.commit({ type: 'add', rows: gridChanges.addList });
            grid.commit({ type: 'update', rows: gridChanges.updateList });
            grid.commit({ type: 'delete', rows: gridChanges.deleteList });

            grid.history({ method: 'reset' });

          $("#grid_json").pqGrid("option", "dataModel.data", sales.data );
          $("#grid_json").pqGrid("option","refreshDataAndView");
        }


I have tested it out by hitting the refresh button on the pager...

when I do  $("#grid_json").pqGrid("option", "dataModel.data", sales.data ); and then I hit refresh it goes to zeros.  If I take it out of Pivot mode and and back in, my data comes back but as the old data.

when I do           $("#grid_json").pqGrid("option", "dataModel.data", sales); it will say the following: c.slice is not a function, l.slice is not a function: If I take it out of Pivot mode and back in, my data comes back but as the old data.

Not sure where I am going wrong.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6307
    • View Profile
Re: Local Storage
« Reply #5 on: May 10, 2018, 12:05:04 pm »
Few conceptual points:

1. Pivot mode / row grouping is for reporting purpose.
Transactions are not supported when the grid is in pivot mode.
Please switch off the pivot mode before data updates are made in grid.

2. Transactions and getChanges API are designed to send delta changes to remote server to minimize data traffic between browser and remote location and get confirmation and unique primary keys generated from remote store before committing changes in grid.

Since the data is being saved in local storage in your case skipping the remote storage part, please reconsider/ evaluate whether you actually require transactions.

Please share a jsiddle if you face any coding issues.

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #6 on: May 10, 2018, 12:34:50 pm »
Thanks for the reply, your point on the first topic, everything worked once pivot mode was turned off. Working good now, I never thought of turning the pivot mode off.

In terms of transactions, is there another way to make the data save locally?  I am using the lists to update the source, but want to give the users options to evaluate everything before they make any firm changes to the server.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6307
    • View Profile
Re: Local Storage
« Reply #7 on: May 10, 2018, 09:44:06 pm »
Since you seem to be interested in saving the complete data to local storage, another way is to listen to change event that is fired whenever there is update, addition or deletion of records in grid.

In change event -> get complete data of grid -> save locally.

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #8 on: May 11, 2018, 03:33:48 am »
Ahh makes sense, vs me running through an iteration.  just get data and set it back in storage, I completely over thought the process haha. 

I was also curious, since using local storage, I noticed I started seeing the following, thoughts?:

pqgrid.min.js:14 Uncaught TypeError: e.sort is not a function
    at e.cSort._sortLocalData (pqgrid.min.js:14)
    at e.cSort.sortLocalData (pqgrid.min.js:14)
    at e.(anonymous function).(anonymous function).e.pqGrid.sort (http://localhost:51236/ParamQuery/5.1.0/pqgrid.min.js:14:7269)
    at e.(anonymous function).(anonymous function).o._onDataAvailable (http://localhost:51236/ParamQuery/5.1.0/pqgrid.min.js:12:20391)
    at e.(anonymous function).(anonymous function).l.refreshDataAndView (http://localhost:51236/ParamQuery/5.1.0/pqgrid.min.js:10:15728)
    at e.(anonymous function).(anonymous function).r._create (http://localhost:51236/ParamQuery/5.1.0/pqgrid.min.js:12:13873)
    at e.(anonymous function).(anonymous function)._create (https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js:6:7987)
    at e.(anonymous function).(anonymous function)._createWidget (https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js:6:10056)
    at new e.(anonymous function).(anonymous function) (https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js:6:7545)
    at HTMLDivElement.<anonymous> (jquery-ui.min.js:6)

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #9 on: May 11, 2018, 07:36:39 am »
probably blocking my DOM I am assuming....

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #10 on: May 11, 2018, 10:28:49 am »
Yup that's exactly what happened, I had it refreshing, so it was blocked...  I am looking at using IndexDB, can ParamQuery call to it by any chance?

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #11 on: May 11, 2018, 01:40:46 pm »
reason I ask is because I am using localForage and am trying to take advantage of the local side space. and when I run the get item from the db, it will not load Paramquery, I am pretty sure because it is asynchrous.

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6307
    • View Profile
Re: Local Storage
« Reply #12 on: May 11, 2018, 04:30:38 pm »
Please share a jsfiddle so that  I can find the reason for error.

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #13 on: May 12, 2018, 08:44:06 am »
I'll try and get it on there, it happens but not so often, I am playing around with some service workers seeing if that helps.  What is happening is it is asynchronous, and I am wrapping the methods for the storage for the promises and IndexDB is only asynchronous...   So it blows by my first call and straight to the grid  Not sure how well fiddle will work but will get it on there.  Installed a package on Nuget, and it blew all my references out with other dependencies so now my controller is refusing connections :(....  Wish it would confirm about 20 references being installed before actually doing it......

mercury85

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 58
  • ASP.NET, VB.NET, MVC, JS, C#, VBA, SQL, MDX, DAX
    • View Profile
Re: Local Storage
« Reply #14 on: May 16, 2018, 09:54:42 am »
Hi, I have provided an example with the attempt to use IndexDB on the following fiddle.

http://jsfiddle.net/mgregory85/t0efofk4/5/

I am loading IndexDB when a user first logs on, and the getter still is off when I receive a promise.