localstorage瀏覽器貯存

2019年8月24日 214次阅读 来源: haostarlilac

需求

a.html頁面天生定單信息，b.html中挪用。

經由過程不操縱數據庫，直接在瀏覽器自帶的數據庫中舉行操縱，固然主如果對Json數據的操縱。

a.html代碼部份：

<!--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，在瀏覽器中就可以夠看到已保存到瀏覽器中了

《localstorage瀏覽器貯存》

下面要做的，就是在b.html中挪用localstorage中的數據
b.html

<!--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就可以看到表格中湧現書名

《localstorage瀏覽器貯存》

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

    原文作者：haostarlilac
    原文地址: https://segmentfault.com/a/1190000015150137
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞