| window.localStorage |
|---|
| 生命周期为永久生效,除非手动删除,否则页面关闭也会存在 |
| 可以多页面共享 (同一浏览器) |
| 以键值对的形式存储使用 |
| 函数功能 | 具体实现 |
|---|---|
| 存储数据 | localStorage.setItem(key,value) |
| 获取数据 | localStorage.getItem(key) |
| 删除数据 | localStorage.removeItem(key) |
| 清空数据 | localStorage.clear() |
要想查看自己存储的数据,以谷歌浏览器为例,按下f12,
点击application,点击localStorage即可查看已存数据
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<button class="set">存取数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空数据</button>
<script>
var input = document.querySelector('input');
var set = document.querySelector('.set');
set.addEventListener('click', function () {
//当我们点击了之后们就可以把表单里面的值存储起来
var val = input.value;
localStorage.setItem('uname', val);
localStorage.setItem('password', val);
})
var get=document.querySelector('.get');
get.addEventListener('click',function () {
var uname = localStorage.getItem('uname');
console.log(uname);
})
var remove=document.querySelector('.remove');
remove.addEventListener('click',function () {
localStorage.removeItem('uname');
})
var del = document.querySelector('.del');
del.addEventListener('click',function () {
localStorage.clear();
})
</script>
</body>
</html>
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
