P5.js: Create a friendly wrapper over webStorage API

Created on 3 Mar 2019  路  2Comments  路  Source: processing/p5.js

Nature of issue?

  • [x] New feature request

Most appropriate sub-area of p5.js?

  • [x] Utilities
  • [x] Other (specify if possible) - DOM

Which platform were you using when you encountered this?

  • [x] Mobile/Tablet (touch devices)
  • [x] Desktop/Laptop
  • [x] Others (specify if possible)

New feature details:

Many times, people would have been need of local Storage to store persisting data, even after the browser is closed, to be used again, when the sketch is run next time, to remember the state of the sketch the last time it was run , and so on.

I suggest thecreation of a friendly wrapper around the webStorage API of HTML5.

This new feature involves ,

  • checking for existence of webStorage (raising errors if necessary),
  • setting a new name value pair,
  • retrieving a name value pair,
  • deleting name value pairs, etc.

for eg, the implementation can look like:

storeData("a", "apple");
let value = getData("a");  //returns value corresponding to passed name
let values = getData();  //returns everything stored in local Storage
deleteData("a");
deleteData(); //delete all data stored in local Storage

(function names can be set based on further discussions)

Notes:

  • Can be changed between local or session storage

Benefits:

  • Provide easy access to webStorage API, without worrying about availibility (by checking for its - existence within the wrapper function)
  • Avoiding dot notation to be beginner friendly ( localStorage.getItem("a") ==> getData("a"))

I request the community to provide their suggestions on this,
Thank you!

feature request

Most helpful comment

There are a number of well-supported js libraries that do this and work well with p5.js, for example:
https://github.com/tsironis/lockr
https://github.com/marcuswestin/store.js
https://github.com/nbubna/store

I think by the time you're using local storage, most users have enough knowledge to understand how to add in an additional library. So I would be hesitant to reinvent the wheel in this case.

All 2 comments

There are a number of well-supported js libraries that do this and work well with p5.js, for example:
https://github.com/tsironis/lockr
https://github.com/marcuswestin/store.js
https://github.com/nbubna/store

I think by the time you're using local storage, most users have enough knowledge to understand how to add in an additional library. So I would be hesitant to reinvent the wheel in this case.

I agree. I will close this issue then 馃憤

Was this page helpful?
0 / 5 - 0 ratings