Develop Reference

How to store an object that is retrievable from the client-side in Javascript

Beginner question: I built a simple draggable to-do list that caches the state in a single object (tasks, containers and index) - currently, it's storing it in local storage. I am working on the server side using express and node.js, but I am confused as to where I would simply store the object. Would a database like mongodb be a good choice...or is there an even simpler option? I assume I can keep the project static and have the server side just receive and serve up JSON? Thanks!

If you plan to integrate it with backend server, it is actually a good idea to store the object in a database. The benefit is, you can still maintain the state of your to-do-list no matter on which machine you are logging in. If you access your to-do-list app from the browser of your smartphone or desktop, they both still point to a single source of truth, which is your database. Think of it as a Trello board that is in-sync on every device. In your database, you may record the task status, task ID, description, etc. If you want to go further, you can group this information per user, so every user will have their own to-do-list. (which is not possible if you rely on conventional local storage). With database, you can extend the functionality beyond simple to-do-list. Alternatively, you may consider a much simpler solution by recording the object as JSON file and storing it in your server. This solution is feasible albeit limited flexibility.
I would recommend MongoDB Atlas and Firebase Realtime Database as both are beginner friendly and easy to use. Both are free-of-charge on limited usage and hosted in the cloud.

How to use Web Crypto API (or something similar) just to store data that can't be easily transferred?

My requirement is to store UUID-like on client's web browser to identify user's machine (web browser copy in this case). Let's say, if IT guy comes to fix a laptop of HR manager, they could easily view username/password saved in web browser and use that credential on his PC later. My idea is to simply save an UUID in web browser's local storage and send it to verify at backend server. If username or password or UUID does not match, deny access. The problem is local storage can be viewed and re-created by IT guy easily.
After Google, I believe that Web Cryto API is the way to go. It can be used to store encrypted object in IndexedDB with extracable = false, but can read via JavaScript, I hope. Unfortunately, most of online article are talking about encrypting/decrypting data which is too much for me. I just want to store data that can't be transferred to another machine easily, but can read with JavaScript. That's it.
Can anyone provide sample code or blog post to achieve this? Thank you.
PS 1) I know about web browser fingerprint concept, but it's not a solution since fingerprint value keeps changing from time to time.
PS 2) My JavaScript on production environment will be obfuscated and/or webpacked and/or made-confused by my own algorithm. Yes, it can be reverted-engineering by webapp developer, but not by most of users in the organization, I think.

Javascript storage in offline application

I'm working on an offline application in Javascript that will convert a <div> to <canvas> and save it as an image to a location in local disk.
I'd prefer if the saving has no dialog and to save to the same location (set in configuration) every time.
I'm still going through the documentation on Cache API but there doesn't seem to be any answers in regards to setting absolute paths. All the examples show relative paths. I'd like to set it to something like C:/Users/Work/Presentation/file1.jpg, and have it overwrite itself every save.
Is this possible with Cache API or is there another offline storage API (localstorage won't work because it only stores k-v pairs) that would better suit this use case? Is there a library that already exists to make this implementation easier?

Why not save the image data as a base-64 encoded image or a BLOB in localStorage? And deal with encoding/decoding in your code?
You can try these packages:
https://www.npmjs.com/package/base64-img
https://www.npmjs.com/package/blob-util
And, Yes. You should change your Username. ;)

Have you tried PouchDB, via their home page.
PouchDB was created to help web developers build applications that
work as well offline as they do online.
It enables applications to
store data locally while offline, then synchronize it with CouchDB and
compatible servers when the application is back online, keeping the
user's data in sync no matter where they next login.

Storing data while processing an app through phonegap

I am using the Phonegap platform for developing an app and this runs on nexus 5 android 4.
The app is having a user interface through which it takes input from the user and processes it using the Javascript. My question is: Can I store/capture this data somewhere so that I can utilize it later. The utility can be sending the captured data to another server and getting a response from it for the specific data.
What is the best architectural way to accomplish this? Any thoughts highly appreciated.

There are many options to do this, IndexedDB, SQLite, localStorage, sessionStorage which are all HTML5 standards.
You might even be able to use XML file storage to do this.
Its your preference on what works best for you.

Offline webapp. How to store data?

Introduction:
App must be able to run completely offline, store data locally and post it online via AJAX whenever there is an internet connection available - this may be some days later.
Question:
How to store data using Javascript?
Additional notes:
I don't want to use any server-side technology.
It must be secure like a database. I've read about cookies and html5 storage but none of them sound convincing.

If you are supporting modern browsers, you can make use of HTML5 Local Storage.
Persistent local storage is one of the areas where native client applications have held an advantage over web applications. For native applications, the operating system typically provides an abstraction layer for storing and retrieving application-specific data like preferences or runtime state. These values may be stored in the registry, INI files, XML files, or some other place according to platform convention. If your native client application needs local storage beyond key/value pairs, you can embed your own database, invent your own file format, or any number of other solutions.
Example
// Save data to a the current session's store
sessionStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + sessionStorage.getItem("username"));
// Get the text field that we're going to track
var field = document.getElementById("field");
// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if ( sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}
// Check the contents of the text field every second
setInterval(function(){
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
}, 1000);
Browser Compatibility
Older Browsers
Use Polyfill.

Depending on how complex your data structures are that you want to store you could look at indexedDB. It's availability is still pretty bleeding edge but with a polyfil you can target the majority of modern desktop and mobile browsers.
The data stored is no more secure than any other client storage model since it's meant to be read with JavaScript.
The API itself is pretty complex to dive straight into using so you might want to look at wrapper APIs such as PouchDB which syncs with CouchDB or if you want something much simpler there's db.js.

You can use HTML5 Local Storage
Use polyfill for older browser
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#web-storage-localstorage-and-sessionstorage

Exactly what you want:
You can set up a CouchDB instance on IrisCouch to store your data. CouchDB is a database that acts as a webserver, so it can serve html pages based on its own data -- this use of the CouchDB (to serve pages) is commonly called CouchApp.
So you learn about CouchDB and write a HTML/Javascript/CouchDB-flavored app to serve your page. There are tools that facilitate this.
After that, you only need to send the data to your CouchDB database and it will be on your web page. You'll manage the client side stuff with PouchDB, a implementation of CouchDB that runs on your browser and saves your data locally, so you never lose it, and automatically updates your local data on the CouchDB server and vice-versa. It's the bleeding edge of the offline storages on the internet.
To ensure that the clients will not send bad data to the server, you can set up authentication (so to connect Pouch with Couch you will need to provide a password) or you can set up validation functions (so the server will only accept data storage requests that match certain parameters you define). These two approaches are well explained in the guide I linked before (here), but you will certainly run into all of this during your CouchDB learning process.
A lot of stuff, but a cool solution enough for the trouble. Also, this CouchDB thing is so easy I can bet you'll read and learn everything in one or two days.