做一个简陋的小网站之:使用localStorage---(5)

最新推荐文章于 2024-05-15 09:46:50 发布

richard1230

最新推荐文章于 2024-05-15 09:46:50 发布

阅读量501

点赞数

分类专栏：前端 web开发

本文链接：https://blog.csdn.net/richard1230/article/details/85041547

版权

web开发同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

文章目录

只要刷新一下页面hash就没有了;
在这里插入图片描述

有什么办法可以留住这些hash呢;
没有办法让js的变量在下个页面继续保留;
那怎么办呢,让这个变量逃离js即可;
在这里插入图片描述

hash的变化永远是因为用户的编辑产生的;刷新就没了;

在这里插入图片描述

思路:
在这里插入图片描述

localstage里面可以存很多东西,每个东西可以分配一个桶里,zzz就是某一个桶的名字;

在这里插入图片描述

可以看一个local Storage:

在这里插入图片描述

编辑一下:
在这里插入图片描述
可以发现下面多了一个v1.com

同时出现zzz了；
在这里插入图片描述

localStorage.setItem('zzz',JSON.stringify(hash))的意思是可以让localStorage里面出现一个叫zzz的桶,桶里面的内容叫hash；把js的一个变量存到浏览器里面了;
在这里插入图片描述

可以看到变化了:

在这里插入图片描述

覆盖原来的hash

在这里插入图片描述

j检测有没有之前留着的hash，有的话,就把之前留着的hash从localstorage里面取出来,如果不是空的,就覆盖我的hash；
读取进度就此可以做到;
什么时候可以保存进度呢;
一旦发现你过了一关,你就可以存个档案;(就是之前hash变更那里可以存档)

在这里插入图片描述

总结

先声明一个二维数组,而后在声明一个hash，发现如果存过一个hash，就把之前的一个hash覆盖掉;
遍历key,生成kbd便签;每个kbd标签里面添加按钮;同时在按钮上面添加id；在按钮被点击的时候,去包含所有时间信息的hash里面去取target；这个target就是用户点击的元素;

在这里插入图片描述

然后这个值只要去取它的id就是用户点击的东西;
而后用户输入一个网址,只要用户已输入这个网址,我就改变这个hash；只要hash一改变,我就存档一下(方便用户刷新的时候读档);而后用户在点击某个按钮的时候打开hash里面对应的网址;
同时要求是新标签打开(window.open);

一个bug的解决

在这里插入图片描述

完整代码:

<!DOCTYPE  html>
<html  lang="zh-Hans">
<head>
<meta  charset="UTF-8">
<title>我的导航</title>
<link  rel="stylesheet"  href="./style.css">
</head>
<body>
<header></header>
<main  >
<div  class="wrapper"  id="mainxxx">

</div>
</main>
<footer></footer>
<script>
keys ={
0:{0:'q',1:'w',2:'e',3:'r',4:'t',5:'y',6:'u',7:'i',8:'o',9:'p',length:10},
1:['a','s','d','f','g','h','j','k','l'],
2:['z','x','c','v','b','n','m'],
length:3

}
hash = {
q :  'qq.com',
w:'weibo.com',
e:'ele.me',
r:'renren.com',
t:'tianya.com',
y:'youtobe.com',
u:'uc.com',
i:'iqiyi.com',
o:'opera.com',
p:undefined,
a:'acfun.tv',
s:'sohu.com',
z:'zhihu.com',
m:'www.mcdonalds.com.cn'

}
//取出localstorage中的zzz对应的hash
hashInLocalStorage = JSON.parse(localStorage.getItem('zzz') || 'null')
if (hashInLocalStorage){
hash = hashInLocalStorage
}
//遍历keys,生成kbd标签
index = 0
while(index < keys['length']){ //0 1 2，这是第一层循环,生成三个div
divxxx = document.createElement('div')
mainxxx.appendChild(divxxx)
row = keys[index] //第一个数组 第二个数组 第三个数组
console.log(row) //这是打印,类似于print
index2 = 0
while(index2 < row['length']){//第一行10个 第二行9个 第三行7个;第二层循环,每次循环的时候创建一个kbd,
kbdxxx = document.createElement('kbd')//
kbdxxx.textContent = row[index2] //kbdxxx里面的文本内容是
buttonX = document.createElement('button')
buttonX.textContent = '编辑'
buttonX.id = row[index2]
buttonX.onclick = function(xzkjcnxlkcjlk){
key = xzkjcnxlkcjlk['target']['id'] //q w e r t
x = prompt('给我一个网址')
hash[key] = x//hash变更
localStorage.setItem('zzz',JSON.stringify(hash))//只要Hash变了，就把hash存到zzz里面;
console.log(hash)
}
kbdxxx.appendChild(buttonX)
divxxx.appendChild(kbdxxx)
index2 = index2 +1
}
index = index + 1

}
document.onkeypress = function(xzkjcnxlkcjlk){
// console.log('我发现你输入了一个键')
// console.log('你按键的时候的所有信息是')
// console.log(xzkjcnxlkcjlk['key'])
key = (xzkjcnxlkcjlk['key'])//拿到用户按的键
website = hash[key] //得到键所对应的网站
console.log(website) //
// location.href = 'http://'+website//把当前地址变成新的网站的地址，模拟用户在地址栏输入,
window.open('http://'+website,'_blank')//模拟用户新开页面，在那开呢,在blank

}
</script>
</body>

</html>

style.css

*{margin: 0;padding: 0;}
a{text-decoration: none;}
kbd{border: 1px  solid  red;width: 4em;height: 4em;display: inline-block;
text-transform: uppercase;
position: relative;
}
kbd  >  button {
position: absolute;
right: 0;
bottom:0;
display: none;
}
kbd:hover  >  button{
display: inline-block;
}

main{
text-align: center;
}
#mainxxx{
display: inline-block;
}
#mainxxx  >  div:nth-child(2){
margin-left: 2em;
}
#mainxxx  >  div:nth-child(3){
margin-left: 4em;
}

richard1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
做一个简陋的小网站之:使用localStorage---(5)

文章目录覆盖原来的hash总结完整代码:只要刷新一下页面hash就没有了;有什么办法可以留住这些hash呢;没有办法让js的变量在下个页面继续保留;那怎么办呢,让这个变量逃离js即可;hash的变化永远是因为用户的编辑产生的;刷新就没了;思路:localstage里面可以存很多东西,每个东西可以分配一个桶里,zzz就是某一个桶的名字;可以看一个local Storage:...
复制链接

扫一扫

专栏目录