Window.localStorage 本地存储
Posted 乱舞春秋__
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Window.localStorage 本地存储相关的知识,希望对你有一定的参考价值。
localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。
特点:
1.生命周期直至手动删除
2.同一个浏览器内数据可以共享
3.3.以键值对的方式存储数据
使用方法:
1.存取数据
语法格式:
localStorage.setItem("key", "value");
2.读取数据
语法格式:
localStorage.getItem("key");
3.删除数据
语法格式:
localStorage.removeItem("key");
4.清空数据
语法格式:
localStorage.clear( );
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
用户名:<input type="text" id="uname">
年龄:<input type="text" id="uage">
<button class="save">存储</button>
<button class="remove">删除用户名</button>
<button class="get">读取用户名</button>
<button class="clear">清空</button>
<script>
var uname = document.querySelector('#uname');
var uage = document.querySelector('#uage');
var save = document.querySelector('.save');
var remove = document.querySelector('.remove');
var get = document.querySelector('.get');
var clear = document.querySelector('.clear');
save.addEventListener('click', function () {
var infoname = uname.value;
var infoage = uage.value;
localStorage.setItem('username', infoname);
localStorage.setItem('userage', infoage);
});
remove.addEventListener('click', function () {
localStorage.removeItem('username');
});
get.addEventListener('click', function () {
console.log(localStorage.getItem('username'));
});
clear.addEventListener('click', function () {
localStorage.clear();
});
</script>
</html>
输入以下内容:
(1)点击存储按钮
两条数据被存储至本地存储。
(2)点击删除用户名按钮
username数据被删除。
(3)点击获取用户名按钮
控制台输出了username。
(4)点击清空按钮
数据被清空。
值得一提的是,关闭页面后,再次打开时数据仍然存在。
以上是关于Window.localStorage 本地存储的主要内容,如果未能解决你的问题,请参考以下文章