localstorage浏览器储存

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了localstorage浏览器储存相关的知识,希望对你有一定的参考价值。

需求

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,在浏览器中就可以看到已经保存到浏览器中了

技术图片

下面要做的,就是在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就能看到表格中出现书名

技术图片

结论:json这块,存入的时候,要把json对象转换成json字符串,才能存入到localstorage中,在读取的时候,要把字符串转化成对象,才能读取对象中的值


以上是关于localstorage浏览器储存的主要内容,如果未能解决你的问题,请参考以下文章

h5-localStorage储存的使用

关于localStorage储存多个数据

html5储存方式(demo:localStorage)

vue中 localStorage的使用方法(详解)

本地储存

cookie localStorage与sessionStorage的使用及区别