Resolve conflicts + Update article

Author: odsantos

6-data-storage/02-localstorage/article.md

@@ -7,7 +7,7 @@ What's interesting about them is that the data survives a page refresh (for `ses
 We already have cookies. Why additional objects?
 
 - Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that.
-- The server can't manipulate storage objects via HTTP headers, everything's done in JavaScript.
+- Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript.
 - The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other.
 
 Both storage objects provide same methods and properties:
@@ -19,11 +19,8 @@ Both storage objects provide same methods and properties:
 - `key(index)` -- get the key on a given position.
 - `length` -- the number of stored items.
 
-<<<<<<< HEAD
-=======
 As you can see, it's like a `Map` collection (`setItem/getItem/removeItem`), but also allows access by index with `key(index)`.
 
->>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
 Let's see how it works.
 
 ## localStorage demo
@@ -45,9 +42,9 @@ localStorage.setItem('test', 1);
 alert( localStorage.getItem('test') ); // 1
 ```
 
-We only have to be on the same domain/port/protocol, the url path can be different.
+We only have to be on the same origin (domain/port/protocol), the url path can be different.
 
-The `localStorage` is shared, so if we set the data in one window, the change becomes visible in the other one.
+The `localStorage` is shared between all windows with the same origin, so if we set the data in one window, the change becomes visible in another one.
 
 ## Object-like access
 
@@ -64,7 +61,7 @@ alert( localStorage.test ); // 2
 delete localStorage.test;
 ```
 
-That's allowed for historical reasons, and mostly works, but generally not recommended for two reasons:
+That's allowed for historical reasons, and mostly works, but generally not recommended, because:
 
 1. If the key is user-generated, it can be anything, like `length` or `toString`, or another built-in method of `localStorage`. In that case `getItem/setItem` work fine, while object-like access fails:
     ```js run
@@ -76,11 +73,11 @@ That's allowed for historical reasons, and mostly works, but generally not recom
 
 ## Looping over keys
 
-Methods provide get/set/remove functionality. But how to get all the keys?
+As we've seen, the methods provide "get/set/remove by key" functionality. But how to get all saved values or keys?
 
 Unfortunately, storage objects are not iterable.
 
-One way is to use "array-like" iteration:
+One way is to loop over them as over an array:
 
 ```js run
 for(let i=0; i<localStorage.length; i++) {
@@ -89,9 +86,9 @@ for(let i=0; i<localStorage.length; i++) {
 }
 ```
 
-Another way is to use object-specific `for key in localStorage` loop.
+Another way is to use `for key in localStorage` loop, just as we do with regular objects.
 
-That iterates over keys, but also outputs few built-in fields that we don't need:
+It iterates over keys, but also outputs few built-in fields that we don't need:
 
 ```js run
 // bad try
@@ -127,7 +124,7 @@ The latter works, because `Object.keys` only returns the keys that belong to the
 
 Please note that both key and value must be strings.
 
-If we any other type, like a number, or an object, it gets converted to string automatically:
+If were any other type, like a number, or an object, it gets converted to string automatically:
 
 ```js run
 sessionStorage.user = {name: "John"};
@@ -160,7 +157,7 @@ Properties and methods are the same, but it's much more limited:
 
 - The `sessionStorage` exists only within the current browser tab.
   - Another tab with the same page will have a different storage.
-  - But it is shared between iframes in the tab (assuming they come from the same origin).
+  - But it is shared between iframes in the same tab (assuming they come from the same origin).
 - The data survives page refresh, but not closing/opening the tab.
 
 Let's see that in action.
@@ -185,7 +182,7 @@ That's exactly because `sessionStorage` is bound not only to the origin, but als
 
 When the data gets updated in `localStorage` or `sessionStorage`, [storage](https://www.w3.org/TR/webstorage/#the-storage-event) event triggers, with properties:
 
-- `key` – the key that was changed (null if `.clear()` is called).
+- `key` – the key that was changed (`null` if `.clear()` is called).
 - `oldValue` – the old value (`null` if the key is newly added).
 - `newValue` – the new value (`null` if the key is removed).
 - `url` – the url of the document where the update happened.
@@ -201,7 +198,7 @@ Imagine, you have two windows with the same site in each. So `localStorage` is s
 You might want to open this page in two browser windows to test the code below.
 ```
 
-Now if both windows are listening for `window.onstorage`, then each one will react on updates that happened in the other one.
+If both windows are listening for `window.onstorage`, then each one will react on updates that happened in the other one.
 
 ```js run
 // triggers on updates made to the same storage from other documents
@@ -215,7 +212,7 @@ localStorage.setItem('now', Date.now());
 
 Please note that the event also contains: `event.url` -- the url of the document where the data was updated.
 
-Also, `event.storageArea` contains the storage object -- the event is the same for both `sessionStorage` and `localStorage`, so `storageArea` references the one that was modified. We may event want to set something back in it, to "respond" to a change.
+Also, `event.storageArea` contains the storage object -- the event is the same for both `sessionStorage` and `localStorage`, so `event.storageArea` references the one that was modified. We may even want to set something back in it, to "respond" to a change.
 
 **That allows different windows from the same origin to exchange messages.**
 
@@ -232,21 +229,21 @@ Web storage objects `localStorage` and `sessionStorage` allow to store key/value
 | `localStorage` | `sessionStorage` |
 |----------------|------------------|
 | Shared between all tabs and windows with the same origin | Visible within a browser tab, including iframes from the same origin |
-| Survives browser restart | Dies on tab close |
+| Survives browser restart | Survives page refresh (but not tab close) |
 
 API:
 
 - `setItem(key, value)` -- store key/value pair.
 - `getItem(key)` -- get the value by key.
 - `removeItem(key)` -- remove the key with its value.
 - `clear()` -- delete everything.
-- `key(index)` -- get the key on a given position.
+- `key(index)` -- get the key number `index`.
 - `length` -- the number of stored items.
 - Use `Object.keys` to get all keys.
-- Can use the keys as object properties, in that case `storage` event doesn't trigger.
+- We access keys as object properties, in that case `storage` event isn't triggered.
 
 Storage event:
 
 - Triggers on `setItem`, `removeItem`, `clear` calls.
-- Contains all the data about the operation, the document `url` and the storage object.
+- Contains all the data about the operation (`key/oldValue/newValue`), the document `url` and the storage object `storageArea`.
 - Triggers on all `window` objects that have access to the storage except the one that generated it (within a tab for `sessionStorage`, globally for `localStorage`).