HTML5的Web Storage 提供了两种在客户端存储数据的方法:
localStorage和sessionStorage。它们可以键值对的形式在本地保存数据
localStorage:
用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
sessionStorage:
保存会话期内数据,当用户关闭浏览器后,则这些数据会被删除。
Web Storage 优点如下:
存储空间更大(相比于cookie)
存储内容不会发送到服务器
提供一套更为丰富的接口,使得数据操作更为简便
每个域(包括子域)都有独立的存储空间,各个存储空间是完全独立的,
不会造成数据数据混乱。
缺陷主要集中在安全性方面:
浏览器会为每个域分配独立的存储空间,但是浏览器不会检查javascript脚本所在的域与当前域是否相同。
存储在本地的数据未加密而且永远不会过期,极易造成隐私泄露。
目前所有主流浏览器都支持Web Storage.
localStorage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>本地存储之localStorage</title>
</head>
<body>
请输入您的用户名: <input type="text" name="username" id="username">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
window.addEventListener('load',function(){
var setBtn=document.querySelector('.set');
var getBtn=document.querySelector('.get');
var removeBtn=document.querySelector('.remove');
var delBtn=document.querySelector('.del');
var inputElement=document.querySelector("input[type='text']");
var inputVal;
setBtn.addEventListener('click',function(){
inputVal=inputElement.value;
//将指定的键值对存储到用户的浏览器中(localStorage
localStorage.setItem('username',inputVal);
localStorage.setItem('password',inputVal);
});
getBtn.addEventListener('click',function(){
//使用localStorage获取存储的数据
//根据指定的key获取对应的value值
console.log(localStorage.getItem('username'));
});
removeBtn.addEventListener('click',function(){
//将数据从localStorage中移除
localStorage.removeItem('username');
});
delBtn.addEventListener('click',function(){
//清除localStorage中的所有数据
localStorage.clear();
});
});-
</script>
</body>
</html>
F12查看是否已在当前浏览器中存储了:
本地存储之sessionStorage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>本地存储之sessionStorage</title>
</head>
<body>
请输入您的用户名: <input type="text" name="username" id="username">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
window.addEventListener('load',function(){
var setBtn=document.querySelector('.set');
var getBtn=document.querySelector('.get');
var removeBtn=document.querySelector('.remove');
var delBtn=document.querySelector('.del');
var inputElement=document.querySelector("input[type='text']");
var inputVal;
setBtn.addEventListener('click',function(){
inputVal=inputElement.value;
//将指定的键值对存储到用户的浏览器中(sessionStorage)
sessionStorage.setItem('username',inputVal);
sessionStorage.setItem('password',inputVal);
});
getBtn.addEventListener('click',function(){
//使用sessionStorage获取存储的数据
//根据指定的key获取对应的value值
// console.log(sessionStorage.getItem('username'));
//获取跨页面存储的数据
console.log(localStorage.getItem('username'));
});
removeBtn.addEventListener('click',function(){
//将数据从sessionStorage中移除
sessionStorage.removeItem('username');
});
delBtn.addEventListener('click',function(){
//清除sessionStorage中的所有数据
sessionStorage.clear();
});
});
</script>
</body>
</html>