Created persistent data using localStorage

Author: FrancoisCoding

src/components/Home/Home.js

@@ -25,8 +25,8 @@ class Home extends Component {
   };
 
   componentDidMount() {
-    if (sessionStorage.getItem("HomeState")) {
-      let state = JSON.parse(sessionStorage.getItem("HomeState"));
+    if (localStorage.getItem("HomeState")) {
+      let state = JSON.parse(localStorage.getItem("HomeState"));
       this.setState({ ...state });
     } else {
       this.setState({ loading: true });
@@ -84,9 +84,8 @@ class Home extends Component {
             totalPages: result.total_pages
           },
           () => {
-            // Remember state for the next mount if we´re not in a search view
-            if (searchTerm === "") {
-              sessionStorage.setItem("HomeState", JSON.stringify(this.state));
+            if (this.state.searchTerm === "") {
+              localStorage.setItem("HomeState", JSON.stringify(this.state));
             }
           }
         );

src/components/Movie/Movie.js

@@ -17,13 +17,19 @@ export default class Movie extends Component {
   };
 
   componentDidMount() {
-    this.setState({ loading: true });
-
-    // Movie Data
-    const endpoint = `${API_URL}movie/${
-      this.props.match.params.movieId
-    }?api_key=${API_KEY}&language=en-US`;
-    this.fetchItems(endpoint);
+    if (localStorage.getItem(`${this.props.match.paramas.movieId}`)) {
+      const state = JSON.parse(
+        localStorage.getItem(`${this.props.match.paramas.movieId}`)
+      );
+      this.setState({ ...state });
+    } else {
+      this.setState({ loading: true });
+      // Movie Data
+      const endpoint = `${API_URL}movie/${
+        this.props.match.params.movieId
+      }?api_key=${API_KEY}&language=en-US`;
+      this.fetchItems(endpoint);
+    }
   }
 
   fetchItems = endpoint => {
@@ -45,7 +51,15 @@ export default class Movie extends Component {
                 const directors = res.crew.filter(
                   member => member.job === "Director"
                 );
-                this.setState({ actors: res.cast, directors, loading: false });
+                this.setState(
+                  { actors: res.cast, directors, loading: false },
+                  () => {
+                    localStorage.setItem(
+                      `${this.props.match.params.movieId}`,
+                      JSON.stringify(this.state)
+                    );
+                  }
+                );
               });
           });
         }