web 存储
2021-04-09 18:28
阅读:342
标签:def 浏览器 for class value get url str storage
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>Documenttitle>
head>
body>
div style="border: 2px dashed #ccc;width:320px;text-align:center;">
label for="sitename">网站名(key):label>
input type="text" id="sitename" name="sitename" class="text"/>
br/>
label for="siteurl">网 址(value):label>
input type="text" id="siteurl" name="siteurl"/>
br/>
input type="button" onclick="save()" value="新增记录"/>
hr/>
label for="search_phone">输入网站名:label>
input type="text" id="search_site" name="search_site"/>
input type="button" onclick="find()" value="查找网站"/>
p id="find_result">br/>p>
div>
br/>
div id="list">
div>
script>
// 载入所有存储在localStorage的数据
loadAll();
//保存数据
function save(){
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var siteurl = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是:" + siteurl;
}
//将所有存储在localStorage中的对象提取出来,并展现到界面上
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "
";
result += "
key
value
";
for(var i=0;ilocalStorage.length;i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
result += "
"+sitename+"
"+siteurl+"
";
}
// result += "
";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空……";
}
}
script>
body>
html>
Json处理
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>HTML5本地存储之Web Storage篇title>
head>
body>
div style="border: 2px dashed #ccc;width:320px;text-align:center;">
label for="keyname">别名(key):label>
input type="text" id="keyname" name="keyname" class="text"/>
br/>
label for="sitename">网站名:label>
input type="text" id="sitename" name="sitename" class="text"/>
br/>
label for="siteurl">网 址:label>
input type="text" id="siteurl" name="siteurl"/>
br/>
input type="button" onclick="save()" value="新增记录"/>
hr/>
label for="search_phone">输入别名(key):label>
input type="text" id="search_site" name="search_site"/>
input type="button" onclick="find()" value="查找网站"/>
p id="find_result">br/>p>
div>
br/>
div id="list">
div>
script>
//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.keyname,str);
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str);
find_result.innerHTML = search_site + "的网站名是:" + site.sitename + ",网址是:" + site.siteurl;
}
//将所有存储在localStorage中的对象提取出来,并展现到界面上
// 确保存储的 keyname 对应的值为转换对象,否则JSON.parse会报错
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "
";
result += "
别名
网站名
网址
";
for(var i=0;ilocalStorage.length;i++){
var keyname = localStorage.key(i);
var str = localStorage.getItem(keyname);
var site = JSON.parse(str);
result += "
"+site.keyname+"
"+site.sitename+"
"+site.siteurl+"
";
}
result += "
";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空...";
}
}
script>
body>
html>
web 存储
标签:def 浏览器 for class value get url str storage
原文地址:https://www.cnblogs.com/wxy0715/p/12442117.html
评论
亲,登录后才可以留言!