Accept Merge Request InterviewMap#29: (lgc-storage -> master)

Merge Request: add storage、service worker
Created By: @amandakelake-lgc
Reviewed By: @13221097537 
Approved By: @13221097537
Accepted By: @13221097537
URL: https://coding.net/u/mart_13221097537/p/Front-End-Interview-Map/git/merge/29

Author: KieSun

Browser/browser-en.md

@@ -0,0 +1,60 @@
+#### Storage
+
+##### cookie，localStorage，sessionStorage，indexDB
+
+|     features     |                   cookie                   |       localStorage       | sessionStorage |         indexDB          |
+| :----------: | :----------------------------------------: | :----------------------: | :------------: | :----------------------: |
+| life cycle  of data |     generally generated by the server, but you can set the expiration time     | unless cleared manually, it always exists | once the browser tab is closed, it will be cleaned up immediately | unless cleared manually, it always exists |
+| Storage size of data |                     4K                     |            5M            |       5M       |           unlimited           |
+| Communicate with server | it is carried in the header everytime, and has a performance impact on the request |          doesn't participate          |     doesn't participate     |          doesn't participate          |
+
+        
+As we can see from the above table, cookies are no longer recommended for storage. We can use localStorage and sessionStorage if we don't have much data to storage. Use localStorage to storage the data that doesn't change much, otherwise sessionStorage can be used.
+
+##### Service Worker
+
+> Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
+
+At present, this technology is usually used to cache files, increase the render speed of the first screen, wo can try to  implement this function.
+
+```js
+// index.js
+if (navigator.serviceWorker) {
+  navigator.serviceWorker
+    .register("sw.js")
+    .then(function(registration) {
+      console.log("service worker 注册成功");
+    })
+    .catch(function(err) {
+      console.log("servcie worker 注册失败");
+    });
+}
+// sw.js
+// Listen for the `install` event, and cache the required files in the callback
+self.addEventListener("install", e => {
+  e.waitUntil(
+    caches.open("my-cache").then(function(cache) {
+      return cache.addAll(["./index.html", "./index.js"]);
+    })
+  );
+});
+
+// intercept all the request events
+// use the cache directly if the requested data already existed in the cache; otherwise, send requests for data
+self.addEventListener("fetch", e => {
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      if (response) {
+        return response;
+      }
+      console.log("fetch source");
+    })
+  );
+});
+```
+
+Start the page, we can see that the Service Worker has started in the `Application` of the devTools
+
+In the Cache, we can also find that the files we need have been cached
+
+Refreshing the page, we can see that our cached data is read from the Service Worker