vue + mongoose + node.js Project Summary The fifth chapter _localStorage save history

I. Introduction                                                                           

                          1, preservation of historical records search is also a common feature.

                          2. Two popular methods of preservation of historical records:

                                        localstorage: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

                                        sessionstorage: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage

                          3, a few things confusing: cookie, session, localStorage, sessionStorage

                               https://www.cnblogs.com/pengc/p/8714475.html

 

 

Second, the main content                                                                    

1, to prepare papers

      Vue-cli scaffolding in order to allow a higher readability of the code, artificial web Storage may be individually packaged in a code file js

      

 

 

2, is encapsulated localStorage update, delete, clear method localStorage

     Precautions: localStorage can not be stored in an array, so that the time saved in the array needs to be converted to a string used herein: JSON.stringify ()

/ * 
UpdateSearch () ideas: 
          1) requires an array to store things for each search 

          2) each update method is called when the first local to see if there is already an array of preservation of historical records search 
        
          3) If there has been directly added, if it does not exist on the new 
     
          4) in the presence of the search array localstorage 

* / 


Export function updateSearch (searchval) { 
  let Storage = window.localStorage;
   IF (storage.search) { // Storage inside if there is an array of search save history 
    let = the JSON.parse search (storage.search); // remove search history array, and the array him into 

    the let index = search.indexOf (searchval); // Find whether a search inside the array searchval input 
    iF (index ! = -1) { // found,
      search.splice (index,. 1); // stored before deleting the one 
      search.unshift (searchval); // prepend array just entered 
    } the else { // not found 
      IF (search.length <=. 7 ) { // If the search is smaller than the array. 7 
        search.unshift (searchval); // searchval will find just inserted into the front of the array 
      } the else { // search is already larger than the inside. 7 
        search.splice (-search.length. 1,. 1 ); // delete the last 
        search.unshift (searchval); // the array just entered is inserted into the front 
      } 
    } 
    Search = the JSON.stringify (Search); //The array is converted into a string stored localstorage because the array does not support saving localStorage 
    storage.setItem ( 'Search' , Search); 
  } the else { // If not 
    the let = Search the JSON.stringify ([searchval]); 
    storage.setItem ( 'search', search); // if not provided a search array 
  } 
} 

// remove a historical record 
Export function deleteOne (index) { 
  the let Storage = window.localStorage; 
  the let search = the JSON.parse (storage.search ); // Search into an array 
  search.splice (index,. 1 ); 
  Search = the JSON.stringify (Search);
  storage.setItem ( 'Search', Search); // save 
}
 // remove all history 
Export function Clear () { 
  the let Storage = window.localStorage; 
  the let Search = the JSON.stringify ([]); // Clear set when the array 
  storage.setItem ( 'Search' , Search); 
}

 

3, using

Step 1: Components page needs to load on demand

  import {updateSearch} from '../../common/js/localStorage'

 

Step two: each call search method when you update about the history array

  // search function 
      getSearchList () { 
        updateSearch ( the this .searchText); // the current text into the search list 

        the this . $ Axios.get (? `/ API / Search = $ {searchText the this .searchText}`) .then ((RES) => {
          the this the .user = res.data.user;
           the this .moodList = res.data.moodList; 

         IF ( the this the .user || the this .moodList.length) {
             the this .resNo = to false ; 
          } the else {
             the this .resNo = to true ; 
          }
          console.log(res)
        })
      },

 

The third step: Remove and empty the call

Methods: { 
      the getList () { // get the current search list stored locallStorage 
        IF (window.localStorage.search) {
           the this .searchList = the JSON.parse (window.localStorage.search); 
        } 
      }, 
      _deleteOne (index) { 
        deleteOne (index); 
        the this .getList (); 
      }, 
      _clear () { 
        the Clear (); 
        the this .getList (); // here to remember the history of search in real-time to get the current array 
      } 
    }