开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
课前补充
使用 localStorage.setItem();创建一个本地存储的 name/value 对
存储数据到本地
语法格式:
localStorage.setItem("name", "value");
读取数据
let lastname = localStorage.getItem("key");
删除数据语法
localStorage.removeItem("key");
一键删除所有本地储存数据
localStorage.clear()
页面传参
通过在url上拼接?来传递参数
let url = decodeURI(window.location.href);
let argsIndex = url.split("?i=");
实战
需要哪些页面：
- homepage.html 页面 ,用来呈现我们所有的用户
- myinfo.html页面，查看用户的详情内容
- setinfo.html页面，添加我们的用户
homepage.html 页面
<body>
<h3>欢迎来到我的页面</h3>
<h5>下面是我和我的舍友的一些介绍:</h5>
<p>
<a href="./myinfo.html?i=0" id="myname">name</a>
<a href="./myinfo.html?i=1" id="nameTwo">name</a>
<a href="./myinfo.html?i=2" id="nameThree">name</a>
</p>
</body>
<script>
let myname = document.getElementById('myname');
myname.innerText = localStorage.getItem('name0')
let nameTwo = document.getElementById('nameTwo');
nameTwo.innerText = localStorage.getItem('name1')
let nameThree = document.getElementById('nameThree');
nameThree.innerText = localStorage.getItem('name2')
</script>
myinfo.html页面
<body>
<h1>大家好</h1>
<h2>My name is <span id="myname"></span></h2>
<p id="myintor">我来自河南省，目前是沈阳理工大学的一名同学，喜欢敲代码，打游戏， 看小说，希望进入琴理工作室找到与我志同道合的道友
</p>
</body>
<script>
let i = 0
let url = decodeURI(window.location.href);
let argsIndex = url.split("?i=");
i = argsIndex[1]
//获取名字
let myname = document.getElementById('myname');
myname.innerText = localStorage.getItem('name' + i);
//获取介绍
let myintor = document.getElementById('myintor');
myintor.innerText = localStorage.getItem('intor' + i)
</script>
setinfo.html页面
<body>
<input type="text" name="" id="myname" placeholder="请输入名字">
<input type="text" name="" id="myintor" placeholder="请输入介绍">
<input type="button" name="" id="" value="提交" onclick="setinfo()">
</body>
<script>
let myname = document.getElementById('myname')
let myintor = document.getElementById('myintor')
function setinfo() {
let i;
for (i = 0; i >= 0;) {
let ifname = localStorage.getItem('name' + i)
if (localStorage.getItem('name' + i) != null) {
//自定义代码
i++
continue;
} else {
console.log('key 不存在')x
localStorage.setItem('name' + i, myname.value)
localStorage.setItem('intor' + i, myintor.value)
break;
}
}
}
</script>
进阶
优化了只有三个a标签的局限性，转为时时更新的标签 (homepage.html)
优化方式:
通过之前setinfo.html页面中的判断是否存在数据，来判断有几个数据(循环几次)，来渲染几组数据，并通过'./myinfo.html?i=' + i 动态的拼接对应的路径
html = document.createElement('a');
html.setAttribute('href', './myinfo.html?i=' + i);
html.innerText = ifname
alla.appendChild(html)
<body>
<h3>欢迎来到我的页面</h3>
<h5>下面是我和我的舍友的一些介绍:</h5>
<p id="alla">
</p>
</body>
<script>
function setinfo() {
let html
let i;
for (i = 0; i >= 0;) {
let ifname = localStorage.getItem('name' + i)
let alla = document.getElementById('alla')
if (localStorage.getItem('name' + i) != null) {
//自定义代码
console.log('key 存在' + 'key的值为' + ifname)
console.log('这是第' + i + '个用户')
html = document.createElement('a');
html.setAttribute('href', './myinfo.html?i=' + i);
html.innerText = ifname
alla.appendChild(html)
i++
continue;
} else {
console.log('key 不存在')
break;
}
}
}
setinfo()
</script>
再次进阶
为a标签添加了随机颜色的功能(homepage.html)
优化方式:
通过Math.random()方法求随机数，再通过Math.floor()方法获取随机的最大整数
let items = ['1', '2', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
let item = items[Math.floor(Math.random() * items.length)];
又通过下列两行代码，绑定到a标签中
let item_color = ['a-black', 'a-red', 'a-pink', 'a-purple', 'a-violet', 'a-indigo', 'a-orange', 'a-indigo', 'a-blue', 'a-cyan', 'a-teal', 'a-yellow']
html.setAttribute('class', item_color[item]);
<body>
<h3>欢迎来到我的页面</h3>
<h5>下面是我和我的舍友的一些介绍:</h5>
<p id="alla">
</p>
</body>
<script>
function setinfo() {
let html
let i;
for (i = 0; i >= 0;) {
let ifname = localStorage.getItem('name' + i)
let alla = document.getElementById('alla')
if (localStorage.getItem('name' + i) != null) {
//自定义代码
console.log('key 存在' + 'key的值为' + ifname)
console.log('这是第' + i + '个用户')
//2.随机P标签颜色
let items = ['1', '2', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
let item = items[Math.floor(Math.random() * items.length)];
let item_color = ['a-black', 'a-red', 'a-pink', 'a-purple', 'a-violet', 'a-indigo', 'a-orange', 'a-indigo', 'a-blue', 'a-cyan', 'a-teal', 'a-yellow']
//1.向P标签中添加a标签
html = document.createElement('a');
html.setAttribute('href', './myinfo.html?i=' + i);
//3.为a标签绑定随机的class
html.setAttribute('class', item_color[item]);
html.innerText = ifname
alla.appendChild(html)
i++
continue;
} else {
console.log('key 不存在')
break;
}
}
}
setinfo()
</script>
我保证这次是我们今天最后一次进阶
优化用户体验，使input表单输入完东西后会自动清空所输入的内容
myname.value = ''
myintor.value = ''
