HTML5 web 存储,一个比cookie更好的本地存储方式。使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
(1)、localStorage 对象
用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
下面的实例展示了用户点击按钮的次数。
<!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>
<button id="save">保存数据</button>
<button id="get">读取数据</button>
<button id="remove">删除单个数据</button>
<button id="clear">删除所有数据</button>
<button id="index">获取key值</button>
</body>
<script>
console.log(localStorage);
// 一直在浏览器本地存储,除非手动清除掉
console.log(localStorage.constructor);
// 1、保存数据:localStorage.setItem(key,value);
document.getElementById('save').onclick=function(){
localStorage.setItem('name','小花')
localStorage.setItem('age',18)
localStorage.setItem('A',11)
localStorage.setItem('B',12)
localStorage.setItem('C',13)
localStorage.setItem('get11',13)
console.log(localStorage);
}
// 2、读取数据:localStorage.getItem(key);
console.log(localStorage.getItem('age'));
console.log(localStorage.getItem('name'));
// 3、删除单个数据:localStorage.removeItem(key);
document.getElementById('remove').onclick=function(){
localStorage.removeItem('name')
// console.log(localStorage);
localStorage.removeItem('age')
console.log(localStorage);
}
// 4、删除所有数据:localStorage.clear();
document.getElementById('clear').onclick=function(){
localStorage.clear()
console.log(localStorage);
}
// 5、得到某个索引的key:localStorage.key(index);
document.getElementById('index').onclick=function(){
console.log(localStorage.key(0));
}
</script>
</html>