关于Web Storage的那些事
-
Web Storage是一种将少量数据存储在客户端磁盘的技术 - 在支持
WebStorage API的浏览器上，网页设计者可以使用JavaScript操作Web Storage，以下代码用来检测浏览器是否支持Web Storage
if(typeof(Storage)=='undefined'){
alert('您的浏览器不支持Web Storage');
}
else{
//localSorage和sessionStorage...
}
- 在
Web Storage之前，客户端通过Cookie存储少量数据，但是Cookie存储容量较小，且安全性较低。 -
Web Storage提供两种方式将数据报存在客户端：即localStorage和sessionStorage -
Web Storage只允许存储字符串
localStorage和sessionStorage
-
localStorage的生命周期及其有效范围和早期的Cookie类似，不会随着浏览器的关闭消失，适合在数据需要分页或跨窗口的场合使用，除非主动清除数据，否则localStorage会一直存在 -
sessionStorage的数据仅对当前页面有效，也就是说，当浏览器关闭之后，数据就会消失，适合暂时保存数据
初探localStorage
1.访问localStorage
-
Storage对象的setItem（存储）和getItem（读取）方法
window.localStorage.setItem(key,value);
window.localStorage.setItem('userdata','hello world');//存储
window.localStorage.getItem(key）;
window.localStorage.getItem('userdata'）;//读取'hello world'
- 数组索引
window.localStorage['userdata']='hello world';//存储
var value=window.localStorage['userdata'];//读取'hello world'
- 属性
window.localStorage.userdata='hello world';//存储
var value=window.localStorage.userdata;//读取'hello world'
2.删除localStorage
- 删除全部的数据
localSorage.clear();
- 删除某一条数据
window.localStorage.remove('userdata');//remove()方法删除
delete window.localStorage.userdata;//属性删除
delete window.localStorage['userdata'];//数组索引删除
初探sessionStorage
1.存储（类似locaStorage）
window.sessionStorage.setItem(key,value);
window.sessionStorage.setItem('userdata','hello world');//存储
window.sessionStorage['userdata']='hello world';//存储
window.sessionStorage.userdata='hello world';//存储
2.读取
window.sessionStorage.getItem('userdata'）;//读取'hello world'
var value=window.sessionStorage.userdata;//读取'hello world'
var value=window.sessionStorage['userdata'];//读取'hello world'
3.删除
- 删除全部的数据
sessionSorage.clear();
- 删除某一条数据
window.sessionStorage.remove('userdata');//remove()方法删除
delete window.sessionStorage.userdata;//属性删除
delete window.sessionStorage['userdata'];//数组索引删除
例子
题目：
新建 HTML 页面，实现如下功能，并截图上传（文档页面图+Console面板下的Application面板图）：
页面中显示一个数字，初始为0。（数据要从Localstorage中读取）
页面中有一个 加号按钮，每点击一次，上方数字就加一。（数据要存储在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>Document</title>
<style>
#show{
background-color: orange;
height: 30px;
width: 30px;
text-align: center;
}
#add{
background-color: orchid;
height: 30px;
width: 30px;
text-align: center;
}
</style>
<script>
function onLoad(){
if(typeof(Storage)=='undefined'){
alert('您的浏览器不支持');
}else{
show.addEventListener('click',readFromLocalStorage);
add.addEventListener('click',addFromLocalStorage);
}
}
function readFromLocalStorage(){
window.localStorage.num=0;
show.innerHTML=localStorage.num;
}
function addFromLocalStorage(){
show.innerHTML=++localStorage.num;
}
</script>
</head>
<body onload="onLoad()">
<div id="show">0</div>
<div id="add">+</div>
</body>
</html>
结果
运行前
运行中
刷新页面后
网友评论