P5.js: Discussion on functions for working with local storage

[stalgiag]

New feature details:

Hello all just wanted to post an issue to track that I am thinking through adding local_storage.js for working with localStorage. Here are some notes as I start to plan:

• setItem() - (could also be named store())
  Not sure what to do here. The options aren't great based on my research. Listing those that have occurred to me (assuming var myVar):

  • setItem('myVar', myVar)
    This is the most straightforward option for implementation but has smallest benefit in terms of masked complexity. Only benefit is removing the need for 'localStorage.' in front of the method.
  • setItem('myVar')
    I don't think this is possible. The only way I can find to do this would require the use of .callee which isn't an option. The trouble lies with getting from a string variable name back to the variable value without being able to assume that the variable is global.
  • setItem({myVar})
    It is easy enough to make this work and it reduces complexity in some ways but it would likely be a bit confusing for many people.
  • setItem(myVar)
    This would be the best but I don't think it is possible.

• getItem()

• removeItem()

  • these have similar unknowns as setItem() but passing in string for variable name would work fine.

• loadSketch()

• saveSketch()

  • haven't looked into this but the idea is that this could save/load all of the global variables. The question here is whether this makes sense to make available.

• clear()

  • straightforward
• getStorageSize()
  
  
  
  • Not sure if this is nice to have or not. Would be a pretty heavy synchronous calculation, but each user potentially has a different available storage size.
  
  

Any thoughts and discussion are welcome. Thanks!

[stalgiag]

Okay! Not sure that there is much interest on this one so I am going to close for the time being. Maybe I'll return to this in the future.

[outofambit]

Some interesting points about needing to stringify and parse things into and out of local storage that i hadn't thought through: https://twitter.com/kellylougheed/status/1130493963104804866.

She has an interesting intro to localStorage over at https://glitch.com/edit/#!/hello-local-storage?path=script.js:30:28, which calls out parsing stringified numbers out of localStorage. Avoiding the complexities of parseInt, etc might be worthwhile (especially since you have to specify base 10 or the behavior is undefined in many browsers).

@kellylougheed 👋 if you have any thoughts on making localStorage easier to work with, feel free to share here! 😸

[kellylougheed]

Love this idea! I think setItem('myVar', myVar) (as well as getItem) could actually mask a fair amount of complexity if it dealt with different data types using typeof. For instance, the setter function could handle converting the number to a string with toString, and the getter function could use parseInt to return an actual number (instead of the string version). Similar parsing would be useful for objects by setting them with JSON.stringify and getting them with JSON.parse.

[stalgiag]

Thanks for the loop in @outofambit.

Hi @kellylougheed! That is a good point. I wasn't including the data type handling in my assessment of the benefits. Part of me is still holding out hope that I will figure out how to make one of the simpler signatures work but your point gives me renewed interest in this. Thank you!

[TanviKumar]

Would be a really good addition to the library. I've been trying to make generative sketches and using local storage to save seed values to regenerate old designs. It becomes a pain having to write it down in a separate notebook somewhere and losing it on refreshing.

[stalgiag]

Okay I am putting this on the 0.9.0 milestone for release around the end of June. Thanks for weighing in everybody!