H5本地存盤-有解無憂

1、localStorage

2、查看本地存盤

3、寫入資料

4、讀取資料

5、洗掉某個鍵

在沒有學習如果操作資料的情況下，如何將資料存盤起來，確保重繪頁面或者關閉瀏覽器，或者重啟電腦，資料就丟失呢？

使用本地存盤可以完美解決這個問題

本地存盤技術學習起來很簡單，就那么幾個方法，關鍵在于理解本地存盤其實就是將資料存盤在硬碟中

瀏覽器提供了幾個API，我們可以使用JS呼叫這些API，實作本地存盤的寫入、讀取以及洗掉

1、localStorage

localStorage 物件與前面學過的 Math物件等一樣，其內置了一些方法，能夠向用戶的本地（其實就是用戶的硬碟上）寫入資料，或者讀取資料

其主要有4個方法

使用下面代碼，就可以向本地存盤指定的資料

        // 寫入資料
       localStorage.setItem('鍵','值')
       // 根據鍵讀取資料，回傳值就是對應的值
       var value=localStorage.getItem('鍵')
       // 洗掉指定的鍵
       localStorage.removeItem('鍵')
       // 洗掉所有的鍵
       localStorage.clear()

2、查看本地存盤

通過瀏覽器的開發這工具，可以查看本地存盤中的資料

后面我們可以通過這里檢測代碼的運行結果

3、寫入資料

引數1稱作鍵，引數2稱作值，鍵的名稱隨意

     localStorage.setItem('name','yhb')
     localStorage.setItem('age',18)

代碼執行結束后，查看開發者工具

下面寫入一個物件

setitem 方法要求鍵和值都必須是字串型別，所以存盤前先將物件轉換為字串型別

     var person={name:'yhb',age:18,gender:'男'}
     // 存盤之前先將 person 轉換為 string 型別
     var str_Person=JSON.stringify(person)
     // 第一個引數稱作鍵，第二個引數稱作值，鍵的名稱隨意
     localStorage.setItem('person',str_Person)

此時無論重繪頁面或者重啟瀏覽器甚至重啟電腦，再次打開這個頁面，資料仍然存在

4、讀取資料

存盤資料的目的是為了使用

讀取資料的使用 getItem 方法，引數為鍵的名稱

     // 讀取本地存盤中，鍵的名稱為 name 對應的值
    var n=localStorage.getItem('name')
    console.log(n)
    var age=localStorage.getItem('age')
    console.log(age)

結果

讀取物件

    var str=localStorage.getItem('person')
   // 此時是字串型別，所以無法通過物件.屬性的方式獲取其中的資料
   console.log(typeof str);
   // 需要先將其轉換為 object 型別
   var person=JSON.parse(str)
   console.log(typeof person);
   // 讀取 name 屬性的值
   console.log(person.name);

5、洗掉某個鍵

下面代碼在本地存盤中洗掉鍵為 name 的資料

localStorage.removeItem('name')

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/186195.html

標籤：其他

上一篇：Sublime Text3簡單使用和部分功能詳解

下一篇：關于WEB-INF的訪問