EN VI

HTML file and client side storage Javascript related question, is it possible?

2024-03-11 10:00:04
HTML file and client side storage Javascript related question, is it possible?

new here.

I would like to make a very light and simple "webpage app" using an HTML file. Inside of which, there is a Javascript code, so it can be easily shared by a simple copy/paste and the code could be checked by anyone who want by avoiding multiple initial files to download.

I don't want any required dependencies or any other steps than just double click to launch it, just a single file that we can just easily run using any modern browsers, and easily check the code for people afraid of potential virus by just doing a right click/open with notepad(++). At worse, a single external API for the first run, since it need to download data anyway for it to be visually usable.

To visualise what I want, it is a basic spreadlist style checklist using HTML's table or simple CSS equivalent, but with images for each items and one for the background, main icons, etc, along with saving which items have been checked, and if possible, having multiple "save files" (text or ini) the user can save and load.

The goal is to display a web page from the HTML file, opened locally, and the first task would be to check if the required images are already downloaded (so they don't need to be fetched through third party servers everytimes, which they would probably not like), plus saved user data to be loaded. I would like to avoid IndexedDB API as I would prefer for the user to be able to swap browsers at will without losing data, but rather being able to even use it on another machine by doing something as simple as copying the html file + its folder.

But that's where I run into a problem, either, I only find totally unrelated answers, or highly specific or just things about how to use third party stuff like APIs, which, for an offline, and single initial file thing wouldn't work as I would like to.

HTML and its embeded Javascript doesn't like at all to deal with client side storage apparently. But most of those are about HTML fetched from a server, a regular internet webpage, what about from our own HTML file from 'file://' rather than 'HTTP(s)' ? Would a locally launched HTML file's Javascript allow to check for existing files/folders like a stand alone Javascript already allow, and download, read and write them ? Or should I abandon the idea to use HTML file as a base ?

Note that this is my first time asking on here, I've read many answers but never needed to create an account to ask a question before. I hope the question is correct.

Thanks in advance !

Tried many things such as = require('fs'); (both var and const variant inst in case) which obviously doesn't work client side.

= new ActiveXObject("Scripting.FileSystemObject"); Along with multiple other answers around FolderExists() and CreateTextFile() which also are for server side or Javascript outside HTML environment.

localStorage.setItem() and localStorage.getItem are browser dependents and obviously "sessionStorage" won't work here. Same with anything that has to do with cache.

Solution:

You are correct, for security reasons javascript running in a web page cannot read files from your filesystem. The only way to implement permanent storage that works cross-browser would be to save the data on a web server, and have your javascript code read and write it via web requests.

A local-only solution could be to require the user to manually load the data via the file upload api , and manually save it every time by generating a download button

Answer

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login