Skip to content
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...
1 parent a0cd11b commit c9b4f7c004a8d731ee56b35e9e218839a5bfe5a2 @undefinedsymbol undefinedsymbol committed
Showing with 90 additions and 0 deletions.
  1. +90 −0 Browser-Storage.md
View
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

Please sign in to comment.
Something went wrong with that request. Please try again.