cookie劣势：
存储大小限制，4kb
单域名下有数量限制，50个左右
污染请求头，浪费流量
本地存储web storage
包括localStorage和sessionStorage
localStorage 本身是一个对象，可以打印查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
console.log(localStorage);
</script>
</body>
</html>
setItem() 设置存储内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
localStorage.setItem("cyy",25);
console.log(localStorage);
</script>
</body>
</html>
将赋值语句注释，关闭网页后再次打开，存储的数据依旧存在
getItem() 获取存储内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
//localStorage.setItem("cyy",25);
console.log(localStorage.getItem("cyy"));
</script>
</body>
</html>
使用对象方式存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
//使用对象方式存储
localStorage.cyy2=26;
console.log(localStorage);
</script>
</body>
</html>
获取方式同理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
//使用对象方式存储
localStorage["cyy3"]=24;
console.log(localStorage.cyy3);
console.log(localStorage["cyy3"]);
</script>
</body>
</html>
使用 removeItem() 删除存储的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
// localStorage.cyy="cyy";
// localStorage.cyy2="cyy2";
localStorage.removeItem("cyy2");
console.log(localStorage.cyy);
console.log(localStorage.cyy2);
</script>
</body>
</html>
使用 clear 清除存储内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
localStorage.cyy="cyy";
localStorage.cyy2="cyy2";
localStorage.cyy3="cyy3";
localStorage.cyy4="cyy4";
console.log(localStorage);
</script>
</body>
</html>
localStorage.clear() 清除所有存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
// localStorage.cyy="cyy";
// localStorage.cyy2="cyy2";
// localStorage.cyy3="cyy3";
// localStorage.cyy4="cyy4";
localStorage.clear();
console.log(localStorage);
</script>
</body>
</html>
使用 length 属性获取存储的个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
localStorage.cyy="cyy";
localStorage.cyy2="cyy2";
localStorage.cyy3="cyy3";
localStorage.cyy4="cyy4";
console.log(localStorage.length);
</script>
</body>
</html>
不同的存储时效
localStorage 存储会持久化（一般来说没有时效，不像cookie）
sessionStorage 会在网页关闭时失效（刷新不会失效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
sessionStorage.cyy="cyy";
console.log(sessionStorage);
</script>
</body>
</html>
不同的存储容量
localStorage 一般是2-5M
sessionStorage 存储容量不一，部分浏览器没有限制
使用storage时的注意点：
1、存储容量超出限制（会抛出QuotaExceededError异常，应该使用try catch）
2、存储类型限制（只能存储字符串）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
<script>
localStorage.a=[1,2,3];
console.log(localStorage);
</script>
</body>
</html>
3、sessionStorage失效机制（刷新不会失效，关闭页面会失效）
实现一个带有过期机制的localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
</head>
<body>
储存数据：<input type="text" id="data"><br>
储存时间（分钟）：<input type="text" id="time"><br>
数据展示：<span id="show">暂无数据</span><br>
<button id="btn">保存</button>
<script>
var now=new Date().getMinutes();
if(now>=localStorage.time){
localStorage.clear();
}else{
if(localStorage.data){
show.innerHTML=localStorage.data;
}
}
btn.onclick=function(){
localStorage.setItem("data",data.value);
show.innerHTML=localStorage.data;
localStorage.setItem("time",new Date().getMinutes()+Number(time.value));
}
console.log(localStorage);
</script>
</body>
</html>
web storage的优化
性能与存储容量大小无关，与读取次数有关
建议：
减少读取次数
一个item中尽量多储存数据