您的位置：首页 > Web前端 > JavaScript

前端学习笔记一、三：JavaScript + html5（1）数组 + web本地存储

2020-07-29 22:35 375 查看

开一个新分类，命名和内容如题。

第一个是js09，关于数组的，还有就是验证一下能不能用web本地存储：
代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

</head>

<body>
<p id="sens1"> </p>
<script type="text/javascript">
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage  sessionStorage 对象!
alert("可以使用web存储！")
} else {
// 抱歉! 不支持 web 存储。
alert("oops! 不可以使用web存储。")

}

var sth = new Array();
sth[0] = "I didn't ask for a free ride."
sth[1] = "You didn't show up and show me a real good time."
sth[2] = "I didn't ask for a rainfall."
sth[3] = "At least you show up and show me nothing at all."

document.writeln(sth[0]);
document.writeln(typeof sth[0]);

for (var i = 0; i < sth.length; i++)
document.getElementById("sens1").innerHTML += sth[i] + "</br>";		</script>
</body>
</html>

运行结果：

然后是web本地存储。
这个例子，就叫“360导航青春版”：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#inputFrame{
width: 60%;
margin: auto;
overflow: auto;
}
#inputSite{
padding-top: 15px;
margin: auto;
float: left;
width: 400px;
height: 135px;
border: #050B80 dotted 5px;
border-radius: 10px;
text-align: center;
margin-right: 20px;
margin-left: 150px;
}
#search{
margin: auto;
text-align: center;
padding-top: 15px;
float: left;
width: 400px;
height: 135px;
border: #050B80 dotted 5px;
border-radius: 10px;
align-self: auto;
margin-left: 20px;
}
#listFrame{
padding-top: 20px;
margin: auto;
overflow: auto;
width: 500px;
}
#listFrame #list{
}
</style>
<body>
<div id="inputFrame">
<div id="inputSite">
<div class="title">
新建网址
</div>
<span>
网址名（key）：
<input type="text" id="webKey"  /><br/>
</span>
<span>
网址（value）：
<input type="text" id="address" /><br/>
</span>
<button type="button" onclick="save()">新建</button>
</div>
<div id="search">
<div class="title">
查询网址
</div>
<div id="input">
<span>
网址名（key）：
<input type="text" id="searchKey" /><br/>
</span>
<button type="button" onclick="find()">查找</button>
<p id="result"></p>
</div>
</div>
</div>
<div id="listFrame">
<div id="list">

</div>
</div>

<script type="text/javascript">
loadAll();
function save(){
var siteName = document.getElementById("webKey").value;
var siteUrl = document.getElementById("address").value;

localStorage.setItem(siteName,siteUrl);

alert("提交成功！");
}
function find(){
var siteName = document.getElementById("searchKey").value;
var siteUrl = localStorage.getItem(siteName);

var findResult = document.getElementById("result");
findResult.innerHTML = siteName + "的网址是：" + siteUrl;
}
function loadAll(){
var result = document.getElementById("list");
if (localStorage.length > 0)
{
var list = "<table border='2px' cellspacing='0' style='text-align: center;'>";
list += "<tr> <td>网址名(key) </td> <td>网址(value)</td></tr>"
for (i = 1; i < localStorage.length; i++)
{
var site = localStorage.key(i);
var url = localStorage.getItem(site);

list += "<tr> <td>" + site + "</td> <td>" + url + "</td></tr>";
}
list += "</table>";
result.innerHTML = list;
}
else{
result += "当前表格没有网址！"
}
}
</script>
</body>
</html>

运行结果：
新建网址：

查询网址：

显示所有网站：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航