DEV Community

Cover image for Lokalnotes - onBrowser notesapp
John Pinto
John Pinto

Posted on • Updated on

Lokalnotes - onBrowser notesapp

LockalNotes website

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"}
Enter fullscreen mode Exit fullscreen mode

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

Textarea to write

Note highlight

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.

Save the note

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 note


Copy and Download

Copy

Notes Copied

Foreach note created, we can copy the contents of the note by clicking the copy icon.

copy confirmed

You can see a popup message confirming that the contents of the note are copied to the clipboard.

Download

Download file

For download, the contents of that note will be downloaded as a .txt file with the notename as the filename.

Downloaded file

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)

Collapse
 
scottjwalter profile image
Scott Walter • Edited

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.