localStorage与sessionStorage最大的区别就是
localStorage
理论上来说是永久有效的,也就是说不主动清空的话就不会消失。
刷新之后,从3开始计数
sessionStorage
只要关闭浏览器,就会被清空。
案例:输入数据传输到浏览器端并显示
首先是h5+css3的内容,不多赘述
<p>
<span>网络名(key):</span>
<input type="text" id="siteName" placeholder="请输入网站名">
<span>网址(value):</span>
<input type="text" id="siteValue" placeholder="请输入对应网址">
<input type="button" class="add" value="添加" onclick="add()">
</p>
<div id="tab">
</div>
<hr>
<p>
<span>网络名(key):</span>
<input type="text" id="key" placeholder="请输入网站名">
<input type="button" class="search" value="查询" onclick="search()">
<div id="result">搜索结果显示</div>
</p>
1.添加
function add() {
var wName = document.getElementById("siteName").value;
var wAddress = document.getElementById("siteValue").value;
localStorage.setItem(wName, wAddress)
alert("添加成功!")
}
目的只为了获取表单中输入的网站名和网址
2.查询
function search() {
var key = document.getElementById("key").value;
document.getElementById("result").innerHTML
= "网站名:" + key + "<br>网址" + localStorage.getItem(key);
}
获取表单中输入的网站名和网址
3.将数据传递到表单中
function loadAll() {
var result = "<table>";
result += "<tr><th>网站名(key)</th><th>网址(value)</th></tr>";
for (var i = 0; i < localStorage.length; i++) {
var s = localStorage.key(i) + " " + localStorage.getItem(localStorage.key(i));
result += "<tr><td>" + localStorage.key(i) + "</td><td>" + localStorage.getItem(localStorage.key(i)) + "</td></tr>"
}
result += "</table>"
document.getElementById("tab").innerHTML = result;
}
使用循环获取到每一个item