Save/load graphics to loacl storage

AdrianMarsden — Fri, 15 Mar 2013 09:47:16 GMT

I'm sure I was subscribed to a thread about this, but can't find it, so sorry, starting a new one.

I've got some code (that I've added to one of the samples here.) that uses the HTML5 local storage and then retrieving it on next login. (in total 10 lines of code, so I am quite pleased with my self, seeing this morning I had never used localstorage before)

This works fine, but I am now stuck over how to make any edits made to over-write the localstorage version of that option (including deletes) - obviously as it is read in some sort of unique ID needs to be assigned then used later on the edit - in my real app I use the right click context menu editing feature.

Any help appreciated.

Cheers

ACM

Re: Save/load graphics to loacl storage

AdrianMarsden — Sun, 12 Dec 2021 04:57:15 GMT

Sorted it all by myself 😄

I needed to assigned IDs to the graphics as they were being read in, with the stored localstorage index, so;

    for (var i = 0; i < localStorage.length; i++) {
        var n= "SavedGraphic" + i
        saved = dojo.fromJson(localStorage.getItem(localStorage.key(i)));
        console.debug(localStorage.getItem(localStorage.key(i)))
        var graphic = new esri.Graphic(saved);
        graphic.setAttributes({ "ID": n,"LSNo":i });
        userGraphics.add(graphic);
        
    }

This gives each graphic that is loaded in for a new session a attribute (LSNo) that equals the index in localstorage.

Then I need to delete the store when it is edited - I also need to delete the store if it is a new graphic, added that session. So in the createToolbarAndContextMenu function (I'm using the function from
(http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/graphics_contextmenu.html)

    dojo.connect(editToolbar, "onDeactivate", function (tool, graphic, info) {

        if (graphic.attributes.newID) {
            localStorage.removeItem(graphic.attributes.newID)
        }
        else {
            localStorage.removeItem(localStorage.key(graphic.attributes.LSNo))
        }
        
        var now = new Date();
        var n = now.getTime();


        GraphicName = "storedGraphic" + n
        window.localStorage.setItem(GraphicName, dojo.toJson(graphic.toJson()));
    });

Having added

 graphic.setAttributes({ newID: GraphicName })

To the addToMap function. So if the graphic has been added because it was saved before or if it was added in that session the delete from localstorage is treated differently. For previously saved the index is used. For newly added the id is used.

Finally, to the createGraphicsMenu function, the delete section, I add

 userGraphics.remove(selected);            if (selected.attributes.newID) {
                localStorage.removeItem(selected.attributes.newID)
            }
            else {
                localStorage.removeItem(localStorage.key(selected.attributes.LSNo))
            }

That does the same for deletions.

I'm sure there is a tidier way, bu this appears to work.

topic Save/load graphics to loacl storage in ArcGIS JavaScript Maps SDK Questions

Save/load graphics to loacl storage

Re: Save/load graphics to loacl storage