Lokalnotes - onBrowser notesapp
Tags: notesapp, javascript, website, localstorage
Published: 2023-05-09 15:42:54


![LockalNotes website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stb483nauxb4i4lhlc10.png)

A **notesapp** that stores **notes** **on** your **browser**. **[Lokalnotes](https://lokalnotes.com)** 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](https://github.com/pj8912/notesapp-php) 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](https://lokalnotes.com) 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

![Textarea to write](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkhen22hav9020rx2c9m.png)


![Note highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipvvup4gc4njy3jcwqmy.png)




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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zjbcu6pyjqpl02wvyqg.png)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs98xjbky4akwiosf5wu.png)

---

### Copy and Download

#### Copy


![Notes Copied](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uevk51j3pte737709cub.png)

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


![copy confirmed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecyoyrjr9y6eato4y28n.png)

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

#### Download


![Download file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhfrpygdjbz2e6x1evbk.png)


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


![Downloaded file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3bgv3my7ltcvwsausit.png)



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.