A notesapp that stores notes on your browser. Lokalnotes uses localStorage
to store the notes data on your localStorage.
This will stay on your browser and will be cleared when you chose to do it manually or enabled during your browser history deletion. So it's up to you whether it stays on the browser
Why browser?
We have seen many notes application(online/offlie) and I have built one myself using PHP
and SQLite
so offline and on-disk storage. These are somewhat created to manage multiple features including media. These note-taking apps can't considered for quick and easy to use.
Lokalnotes is a lightweight and effective solution for managing your notes directly in your browser.
It's private, no registration required and very very easy to create and export as a .txt
file.
Working and Features
In Lokalnotes we can,
- Create new note
- Delete all notes
- Copy a note
- Download a note
- Delete a note
Create Note
When you create a note, a item notesData
is set in localstorage and the values are stored as json
converted to string.
We leverage this to create multiple notes as values for a single localstorage key, since data in localstorage are stored as key-value pairs.
LocalStorage
key : notesData,
value : {"1683644984302": "hi", "1683644984469": "bye"}
When a note is created the note name is current timestamp. So we can create, read, update and delete a note the same we would if we use a database.
Write and Save Note
A textarea
will open up at the side when you click on the notename. The clicked notename will be in bold
and background converted to whitesmoke
to highlight the current note you are working on.
Click 'Save Note' button to save. You can see the 'Note Saved' message at the sidenav.
You can also check the localStorage
to look at your stored notes π
Copy and Download
Copy
Foreach note created, we can copy the contents of the note by clicking the copy icon.
You can see a popup message confirming that the contents of the note are copied to the clipboard.
Download
For download, the contents of that note will be downloaded as a .txt file with the notename as the filename.
Example :
value : {"1683644984302": "hi",...
will be downloaded as 1683644984302.txt
Techonolgies used
- HTML
- CSS
- Javascript
Conclusion
Start using LokalNotes today and experience a hassle-free note-taking experience right in your favorite web browser.
Top comments (1)
Links to product site no longer work. No link to any source code (though you can find the github repo if you take the time to look). How you did it is interesting, but without source code it's just a story.