需求
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中,在讀取的時刻,要把字符串轉化成對象,才讀取對象中的值