# Wildfire - Search History Feature
###### tags: `bc hydro`

## Scenario
As a user, I want to save my search history and favorite station so that I don't need to spend too much time searching them everyday and I could browse them easily.

However, there's no login system for this application, we can't save the data in user's account.


## Options
Therefore, we want to use cache in browser, and there are three choices such as `cookies`, `localStorage` and `sessionStorage`

### Browser Support

<table>
<thead>
<th>Name</th>
<th>Chrome</th>
<th>Firefox(Gecko)</th>
<th>IE</th>
<th>Opera</th>
<th>Safar</th>
</thead>
<tbody>
<tr>
<td>Cookie</td>
<td colspan=5>Support All</td>
</tr>
<tr>
<td>localStorage</td>
<td>4</td>
<td>3.5</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
<tr>
<td>sessionStorage</td>
<td>5</td>
<td>2</td>
<td>8</td>
<td>10.50</td>
<td>4</td>
</tr>
</tbody>
</table>

Ref: https://caniuse.com/#search=localstorage

### Comparison

| Feature | Cookie | localStorage | sessionStorage |
| ---- |--------| ---------------|----|
| Maximum data size | 4KB | 5MB | 5MB |
| Lifetime | can set expire time | till deleted | till tab is closed |

More Detail: https://wpreset.com/localstorage-sessionstorage-cookies-detailed-comparison/

## Suggestion

We suggest using `localStorage` to save data in browser.
The reason are the following:
1. It supports IE 11.
2. Its data size is up to 5MB.
3. It always exists no matter you refresh page or close browser unless using javascript code to delete it or using developer tool in browser to delete it.

## Frontend
And since we use `react.js` as our frontend, we could combine `localStorage` with `redux` so that we could easily manage the data.
we choose npm package `redux-persist`
https://github.com/rt2zz/redux-persist

This is the example using `redux-persist`.
https://codesandbox.io/s/todos-redux-persist-cpd72

- You can Add Todo and refresh page or close page and reopen the page to see the data is still there.

- If you want to delete `localStorage`.
Opening developer tool and following the following image.