localstorage瀏覽器儲存

時間 2019-12-07

原文原文鏈接

需求

a.html頁面生成訂單信息，b.html中調用。html

經過不操做數據庫，直接在瀏覽器自帶的數據庫中進行操做，固然主要是對Json數據的操做。數據庫

a.html代碼部分：json

<!--html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>頁面1</title>
</head>
<body>
    <table >
        <tr>
            <td>編號</td>
            <td>名稱</td>
            <td>類別</td>
            <td>借書日</td>
            <td>還書日</td>
            <td>金額</td>
        </tr>
        <tr>
            <td id="a">1</td>
            <td id="b">邊城</td>
            <td id="c">小說</td>
            <td id="d">2017-3-2</td>
            <td id="e">2017-3-25</td>
            <td id="f">20</td>
        </tr>
    </table>
</body>
</html>
<!--script-->
<script>
       //獲取td標籤裏面的數據，不能用value，要用innerText或者innerHTML
           var a1 = document.getElementById("a").innerText;
           var b1 = document.getElementById("b").innerText;
           var c1 = document.getElementById("c").innerText;
           var d1 = document.getElementById("d").innerText;
           var e1 = document.getElementById("e").innerText;
           var f1 = document.getElementById("f").innerText;
         var obj = {
            "編號": a1,
            "書名": b1,
            "類別":c1,
            "借書日":d1,
            "還書日":e1,
            "價格":f1
      };
     //講js對象轉化成字符串的形式
      obj = JSON.stringify(obj);

    //以字符串的形式儲存到localstorage中
      localStorage.setItem("訂單", obj);

按下F12，在瀏覽器中就能夠看到已經保存到瀏覽器中了瀏覽器

下面要作的，就是在b.html中調用localstorage中的數據
b.htmlui

<!--html部分-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>頁面2</title>
</head>
<body>
     <table>
      <tr>
        <td id="a2"></td>
      </tr>
    </table> 
</body>
</html> 
<!--script部分-->
 <script>
         //將保存在localstorage中的字符串轉化爲js對象
      var odd=JSON.parse(localStorage.getItem("訂單"));

        //訪問對象中字段的值  
      // console.log(odd.name);
      document.getElementById("a2").innerHTML = odd['書名'];
    </script>

最後打開b.html就能看到表格中出現書名 spa

結論：json這塊，存入的時候，要把json對象轉換成json字符串，才能存入到localstorage中，在讀取的時候，要把字符串轉化成對象，才能讀取對象中的值localstorage