Lokalnotes - onBrowser notesapp

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.

Comments

[Scott Walter]

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.