Permalink
Please sign in to comment.
Browse files
Proposing a new Wiki article about browser storage
This article is aimed at explaining how to store in localStorage and sessionStorage. Name change to Browser-Storage.md As per contribution guidelines. Implamented changes as suggested
- Loading branch information...
90
Browser-Storage.md
| @@ -0,0 +1,90 @@ | ||
| +## Store data in web browser's storage | ||
| + | ||
| +In order to manage data handled by your web application, you do not necessarily need a database. | ||
| +The respective Browser Storage features are supported by Chrome (version 4 and higher), Mozilla Firefox (version 3.5 and higher) and Internet Explorer (version 8 and higher), and a range of other browsers including those of iOS and Android. | ||
| + | ||
| +There are two main possibilities for browser storage: | ||
| + | ||
| +### 1. localStorage | ||
| + | ||
| +Any content/data saved to the ```localStorage``` object will be available after the browser has been restarted (closed and opened again). | ||
| +In order to ***save an item*** to ```localStorage```, you can use the method ```setItem()```. This method must be handed a key and a value. | ||
| +``` | ||
| +Example: localStorage.setItem("mykey","myvalue"); | ||
| +``` | ||
| +To ***retrieve the item from the localStorage***, the method ```getItem``` must be used. The ```getItem``` method must be handed the key of the data you would like to retrieve: | ||
| + | ||
| + ``` | ||
| + Example: localStorage.getItem("mykey"); | ||
| + ``` | ||
| + | ||
| + You can remove an item from ```localStorage``` by using the ```removeItem()``` method. This method must be handed the key of the item to be removed: | ||
| + | ||
| + ``` | ||
| + Example: localStorage.removeItem("mykey"); | ||
| + ``` | ||
| + | ||
| + To clear the entire ```localStorage```, you should use the ```clear()``` method on the ```localStorage``` object: | ||
| + | ||
| + ``` | ||
| + Example: localStorage.clear(); | ||
| + ``` | ||
| + | ||
| +### 2. sessionStorage | ||
| + | ||
| +Items saved in the ```sessionStorage``` object will remain until the browser is closed by the user. Then, the storage will be cleared. | ||
| + | ||
| +You can save an item to ```sessionStorage```, please use the method ```setItem()``` on the ```sessionStorage``` object: | ||
| + | ||
| +``` | ||
| +Example: sessionStorage.setItem("mykey","myvalue"); | ||
| +``` | ||
| +To ***retrieve the item from the sessionStorage***, the method ```getItem``` must be used. The ```getItem``` method must be handed the key of the data you would like to retrieve: | ||
| + | ||
| + ``` | ||
| + Example: sessionStorage.getItem("mykey"); | ||
| + ``` | ||
| + | ||
| + You can remove an item from ```sessionStorage``` by using the ```removeItem()``` method. This method must be handed the key of the item to be removed: | ||
| + | ||
| + ``` | ||
| + Example: sessionStorage.removeItem("mykey"); | ||
| + ``` | ||
| + | ||
| + To clear the entire ```sessionStorage```, you should use the ```clear()``` method on the ```sessionStorage``` object: | ||
| + | ||
| + ``` | ||
| + Example: sessionStorage.clear(); | ||
| + ``` | ||
| + | ||
| +### Saving arrays to localStorage and sessionStorage | ||
| + | ||
| +You cannot just save single values to the ```localStorage``` and ```sessionStorage```, but you can also save the content of an array. | ||
| + | ||
| +In this example, we have an array with numbers: | ||
| + | ||
| +``` | ||
| +var ourArray =[1,2,3,4,5]; | ||
| +``` | ||
| +We can now save it to ```localStorage``` or ```sessionStorage``` using the ```setItem()``` method: | ||
| +``` | ||
| +localStorage.setItem("ourarraykey",JSON.stringify(ourArray)); | ||
| +``` | ||
| +or, for ```sessionStorage```: | ||
| +``` | ||
| +sessionStorage.setItem("ourarraykey",JSON.stringify(ourArray)); | ||
| +``` | ||
| + | ||
| +In order to be saved, the array must first be converted to a string. In the example shown above, we are using the ```JSON.stringify``` method to accomplish this. | ||
| + | ||
| +When retrieving our data from the ```localStorage``` or ```sessionStorage```, convert it back to an array: | ||
| + | ||
| +``` | ||
| +var storedArray = localStorage.getItem("ourarraykey"); | ||
| +ourArray = JSON.parse(storedArray); | ||
| +``` | ||
| +or, for ```sessionStorage```: | ||
| +``` | ||
| +var storedArray = sessionStorage.getItem("ourarraykey"); | ||
| +ourArray = JSON.parse(storedArray); | ||
| +``` |
0 comments on commit
c9b4f7c