Notes on copying local storage data to file and restoring it from file

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

I was curious to know that if I am using or testing a tutorial React app or my code variation of that which uses local storage, how do I make a copy of that data from local storage (managed by browser) to a file in my personal folders (managed by me) and also restore that data from file in my personal folders into local storage. As an example, as I was testing out my code variation of the blog React tutorial app., I wanted to save the posts data into a file before I tried out deleting or modifying the posts. Later if I want to restore the posts data, rather than recreate the posts, I wanted to simply copy the data from my file into the posts local storage variable.

I tried searching on the net for some web page code that I could copy-paste and use but I did not find a suitable link having such code. So I experimented by writing some code of my own and doing fair bit of reading. This post tries to capture that work.

localStorage in JavaScript: A complete guide, https://blog.logrocket.com/localstorage-javascript-complete-guide/

Location of local storage in Chrome on Windows:
C:\Users\Ravi-user\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

The folder has many files but has 3 latest files - .log, .ldb and a "MANIFEST..." file without extension. Looks like it is the .ldb file that has the local storage items stored in it but it is in binary form (don't know if it is encrypted) and so not readable in editors like Notepad++.

I wanted to have a simple HTML and JavaScript file which accessed the posts local storage variable and copied that data into a file. 

FileSystemWritableFileStream: write() method, https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream/write gives an example of writing text to a file from html page JavaScript. I was able to write a small HTML + JS file which took Local Storage variable name as input and saved its (text) contents to file. I think doing the reverse of reading from file and updating Local Storage variable should be straightforward.

Browser local storage seems to be specific to protocol (http different from https) and port (and domain too, it seems, though I have not checked that out). So pages opened in say, http://localhost:4000/url1 is available to  http://localhost:4000/url2 but not available to http://localhost/5500/url2.

So if I wanted to access posts local storage variable used by my React app. then I need to have my html page also shown on the same port (4000 by default). If I use LiveServer extension to show my html page then I need to specify the port on which LiveServer should run.

Section "Customizing Live Server Settings in VS Code" in https://www.alphr.com/vs-code-open-with-live-server/ .. to change port number: Get to settings of the Live Server extension. In its settings.json change the line:
"liveServer.settings.port": 0
to something like:
"liveServer.settings.port": 4000
Now Live Server will use 4000 port. But when I reset it to 0, it did not use 5500 port (which is its default)! It used some port with a much higher number - 64424 in one case. I then changed it to 5500.

So I am able to access local storage of react app run on http://localhost:4000 using html page opened with liveserver on same http://localhost:4000 (after shutting down react server in VSCode).

Copy-pasting Chrome Dev Tools display of Local Storage variable into a file and then pasting it back into a Local Storage variable in Dev Tools works i.e. it creates a copy of the data from one variable to another (or same). 

To view and edit the JSON file with expand and collapse of entries facility, one can use: https://jsoneditoronline.org/ .
To only view the JSON file with expand collapse of entries facility visit https://jsonviewer.stack.hu/ , copy-paste the data into the Text tab and then switch to Viewer tab.

...
In a small HTML + JS file, I tried out the approach of simply copying posts local storage variable data into backupPosts local storage variable (on button press), and the reverse of copying backupPosts into posts. Here the backup version is also on local storage and not on file. That worked quite well. I added the facility of displaying the JSON with expand and collapse buttons using renderjson JS library (I used a CDN facility). That also worked well.

In another small HTML + JS file, I also tried out the approach of copying local storage variable value to clipboard (from where it can be copy-pasted into a file or into an online JSON editor) and then pasting data from clipboard into a local storage variable. That also works but I initially tripped up on clipboard readText (navigator.clipboard.readText()) throwing a DOMException error related to document not having focus. This seems to have been caused by a window.confirm statement I had prior to clipboard readText statement which seems to have moved the focus away from the document. Code trying to give focus back to the document like window.focus(); or document.activeElement.blur(); did not seem to work. On commenting out the window.confirm the code worked.

Later, I modified this function to first do the clipboard readText as an await and then have the window.confirm and Local Storage setItem. That worked!

Related post: DOMException on calling navigator.clipboard.readText(), https://stackoverflow.com/questions/56306153/domexception-on-calling-navigator-clipboard-readtext 

...

For my above stuff, I wanted a clipboard utility that stays open and updates its display window with latest paste contents. The Windows 10 clipboard facility (shown by Win + V) seems to always close when one switches to another window. Following post has some suggestions about alternate clipboard utilities: https://www.reddit.com/r/software/comments/nigedt/a_safe_clipboard_manager_for_windows_10/

Installed https://clipclip.com/  It installs on C drive without giving option where to install! But does a good job showing new clipboard pastes automatically. Window remains open. Has an always on top setting (Under W).

Comments

Post a Comment