标签：储存 words 登录 sessionStorage 存储 localStorage 本地 let document
01-本地存储-sessionStorage会话存储（临时）-存储数据：sessionStorage.setItem('名字','值')-取出数据：sessionStorage.getItem('名字')-删除数据：sessionStorage.removeItem('名字')-清除数据：sessionStorage.clear()
<script>
// sessionStorage：js中提供了这个对象专门操作Session Storage
console.log(sessionStorage)
// 1. 存储数据：sessionStorage.setItem('名字','值')
// sessionStorage.setItem('name', '张三')
// sessionStorage.setItem('age', 19)
// // 2. 取出数据：sessionStorage.getItem('名字')
// document.body.innerHTML += sessionStorage.getItem('name')
// // 如果拿的东西不存在会怎么样？拿到null
// document.body.innerHTML += sessionStorage.getItem('gun')
// // 3. 删除数据：sessionStorage.removeItem('名字')
// sessionStorage.removeItem('name')
// 4. 清除数据：sessionStorage.clear()
// sessionStorage.clear()
// sessionStorage的特点
// 只有自己的页面当前打开存的数据，自己能看到（其他页面，自己页面新开，都看不到）
// 数据要求要安全：存到sessionStorage中（页面关闭就会丢失：保证数据的安全，不会被其他地方乱访问）
// 本地存储都只能存储字符串数据（数字可以自动转），复杂数据类型（数组、对象）需要手动转成json格式
let obj = { name: '张三', age: 19 }
// sessionStorage.setItem('obj', obj) // [object Object] 数据类型（转换后的），数据丢失了
sessionStorage.setItem('obj', JSON.stringify(obj))
</script>
注意：
1.只有自己的页面当前打开存的数据，自己能看到（其他页面，自己页面新开，都看不到）
2.数据要求要安全：存到sessionStorage中（页面关闭就会丢失：保证数据的安全，不会被其他地方乱访问）
3.本地存储都只能存储字符串数据（数字可以自动转），复杂数据类型（数组、对象）需要手动转成json格式
4.如果拿的东西不存在会怎么样？拿到null
02-本地存储-localStorage-永久存储
<script>
// localStorage：永久存储，使用的API跟sessionStorage一样的
// 存：setItem()
localStorage.setItem('name', '前端小白')
// 只要不清理：一直存储
// 清理方式：代码清理（程序员主动清理）；浏览器清理：用户清理
// 本地存储：sessionStorage和localStorage都不会存储重要的数据（不重要）
// 查：getItem()
document.body.innerHTML += localStorage.getItem('name')
// 删：removeItem()
localStorage.removeItem('name')
// 本地存储可以跨页面访问：同一个网站
</script>
注意：
1.localStorage：永久存储，使用的API跟sessionStorage一样的
2.清理方式：代码清理（程序员主动清理）；浏览器清理：用户清理
3.本地存储：sessionStorage和localStorage都不会存储重要的数据（不重要）
03-本地存储应用-登录页面案例
<body>
用户名：<input type="text" name="username" class="un"><br>
密码：<input type="password" name="password" class="pwd"><br>
<button>登录</button>
<script>
// 需求：点击登录，获取用户信息，存入到永久存储，跳转到另外一个页面（location.assign()）
// 1. 获取事件源：button
// 2. 事件类型：点击 onclick
document.querySelector('button').onclick = function () {
// 3. 事件处理
// 3.1 获取数据
let username = document.querySelector('.un').value
let password = document.querySelector('.pwd').value
// console.log(username, password)
// 3.2 存入到localStorage
let obj = {
username: username,
password: password
}
localStorage.setItem('userInfo', JSON.stringify(obj))
// 3.3 跳转到其他页面
location.assign('05-本地存储应用-验证登录.html')
}
</script>
</body>
04-本地存储应用-验证登录案例
<script>
// 验证用户数据
// 1. 获取用户数据：localStorage : userInfo
let userInfo = localStorage.getItem('userInfo')
// 2. 数据拿到的是字符串：不能直接用，转换成js对象
userInfo = JSON.parse(userInfo)
console.log(userInfo)
// 3. 验证：用户名必须是admin 密码必须是123456
if (userInfo.username == 'admin' && userInfo.password == '123456') {
// 3.1 成功：提示成功：输出欢迎语
document.body.innerText = `你好，${userInfo.username}，欢迎来到XXX`
} else {
// 3.2 失败：重新来一次，返回去
alert('用户名或者密码错误，请重试')
// 回去
history.back()
}
</script>
05-本地存储应用-单词查看案例
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 20px;
}
.box {
width: 800px;
height: 60px;
margin: 220px auto;
position: relative;
}
#txt {
width: 798px;
height: 58px;
border: 1px solid #ccc;
font-size: 20px;
}
#keywords {
position: absolute;
top: 60px;
left: 0;
background-color: rgb(12, 255, 24);
list-style: none;
width: 798px;
;
}
li {
line-height: 24px;
cursor: pointer;
}
#description {
/* display: none; */
width: 798px;
height: 200px;
position: absolute;
top: -210px;
border: 1px dashed green;
}
.go {
width: 100px;
height: 40px;
line-height: 40px;
background-color: burlywood;
box-shadow: cadetblue;
position: absolute;
text-align: center;
left: 50px;
top: 100px;
}
.go:hover {
cursor: pointer;
color: steelblue;
}
</style>
</head>
<body>
<div class="go">
单词存储
</div>
<div class="box">
<div id="description"></div>
<div class="top">
<input type="text" id="txt" placeholder="请输入要检索的内容，可以是单词也可以是解释">
</div>
<ul id="keywords"></ul>
</div>
<script>
// 需求：用户在输入框中输入关键字，去找数据匹配：数据在本地存储localStorage中存在：名字words
// 数据格式：对象，由属性名（单词）和值（解释）组成，用户可以通过单词，也可以通过解释来查询数据
// 查询效果：与百度搜索是一样的
// 1. 获取事件源（输入框，ul，描述框）
let des = document.querySelector('#description')
let txt = document.querySelector('#txt')
let ul = document.querySelector('#keywords')
// 2. 给输入框添加oninput事件
txt.oninput = function () {
// 3. 事件处理
// 3.1 清理原来匹配的历史数据：清空ul
ul.innerHTML = ''
// 3.2 获取用户输入的数据
let value = txt.value
// console.log(value)
// 3.3 安全处理：用户输入的数据不能为空：为空就要结束
if (value.length == 0) return
// 3.4 获取数据：存储的单词：localStorage存储，名字叫words
let words = localStorage.getItem('words')
// console.log(words)
// 3.5 验证是否存在数据：null就表示没有拿到：没有必要往下走，结束
if (words == null) return
// 3.6 拿到的数据一定是json字符串：需要转换成js对象
words = JSON.parse(words)
// console.log(words)
// 3.7 遍历对象：for-in，取出来的是属性名（单词）
for (let k in words) {
// console.log(k, words[k])
// 3.7.1 匹配：单词要匹配 || 解释也要匹配：indexOf()
if (k.indexOf(value) != -1 || words[k].indexOf(value) != -1) {
// 3.7.2 匹配成功
// * 创建li
let li = document.createElement('li')
// * 添加内容
li.innerText = `${k}：${words[k]}`
// * 放进ul中
ul.appendChild(li)
// * 鼠标移入事件
li.onmouseover = function () {
this.style.backgroundColor = '#eeeeee'
}
// * 鼠标移出事件
li.onmouseout = function () {
this.style.backgroundColor = ''
}
// * 鼠标点击事件：清空词条，放到描述框中，清空用户输入
li.onclick = function () {
des.innerText = li.innerText
ul.innerHTML = ''
txt.value = ''
}
}
}
}
</script>
</body>
</html>
标签：储存,words,登录,sessionStorage,存储,localStorage,本地,let,document 来源： https://blog.csdn.net/miaopasi_poi/article/details/116102061
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。