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