IocalStorage与sessionStorage
转载自:10-HTML5详解(三)
区别与联系
- 时效性不同,
localStorage
存储会持久化,sessionStorage
存储会在网页会话后失效 - 存储容量不同,
localStorage
一般在20Mb左右,seesionStorage
约为5Mb - 存储类型,两者都仅能存储字符串,注意存储的时候进行类型转换,可以将对象JSON.stringfy()编码后存储
常用API
设置存储内容:
setItem(key, value);
PS:可以新增一个 item,也可以更新一个 item。
读取存储内容:
getItem(key);
根据键,删除存储内容:
removeItem(key);
清空所有存储内容:
clear();
根据索引值来获取存储内容:
key(n);
用法小总结:
sessionStorage 的 API 举例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button>sesssionStorage存储</button>
<button>sesssionStorage获取</button>
<button>sesssionStorage更新</button>
<button>sesssionStorage删除</button>
<button>sesssionStorage清除</button>
<script>
//在h5中提供两种web存储方式
// sessionStorage session(会话,会议) 5M 当窗口关闭是数据销毁 内存
// localStorage 20M 永久生效 ,除非手动删除 清理垃圾 硬盘上
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// sessionStorage存储数据
btns[0].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
window.sessionStorage.setItem('pwd', '123456');
window.sessionStorage.setItem('age', 18);
}
// sessionStorage获取数据
btns[1].onclick = function () {
txt.value = window.sessionStorage.getItem('userName');
}
// sessionStorage更新数据
btns[2].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
}
// sessionStorage删除数据
btns[3].onclick = function () {
window.sessionStorage.removeItem('userName');
}
// sessionStorage清空数据
btns[4].onclick = function () {
window.sessionStorage.clear();
}
</script>
</body>
</html>
效果如下:
如上图所示,我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。
localStorage 的 API 举例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>
<script>
/*
* localStorage
* 数据存在硬盘上
* 永久生效
* 20M
* */
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// localStorage存储数据
btns[0].onclick = function () {
window.localStorage.setItem('userName', txt.value);
}
// localStorage存储数据
btns[1].onclick = function () {
txt.value = window.localStorage.getItem('userName');
}
// localStorage删除数据
btns[3].onclick = function () {
window.localStorage.removeItem('userName');
}
</script>
</body>
</html>
综合案例–记住用户和密码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记住用户名和密码</title>
</head>
<body>
<label for="">
用户名:<input type="text" class="username">
</label>
<label for="">
密码: <input type="password" class="password">
</label>
<label for="">
<input type="checkbox" class="check">记住密码
</label>
<label for="">
<button>登录</button>
</label>
<script>
var username=document.querySelector(".username");
var pwd=document.querySelector(".password");
var check=document.querySelector(".check");
var btn=document.querySelector("button");
//点击记住密码按钮,则将数据存在locatStorage,反之则清除
btn.onclick=function(){
// console.log(username.value);
// console.log(pwd.value);
if(check.checked){
window.localStorage.setItem('username',username.value);
window.localStorage.setItem('password',pwd.value);
}else{
window.localStorage.removeItem('username');
window.localStorage.removeItem('password');
}
}
//如有本地存储有密码,则先加载进来
window.onload=function(){
username.value=window.localStorage.getItem('username');
pwd.value=window.localStorage.getItem('password');
}
</script>
</body>
</html>
附:
1. cookie、localStorage、sessionStorage的区别
- cookie是什么?
用于客户端和服务器端的通信。
可以参考我之前的一篇博客cookie和session - cookie的缺点
存储量太小,只有4kb
所有http请求都带着,会影响获取资源的效率
api简单,需要封装才能用。
总结:在H5之前,cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了, 就开始用后面的两个做本地存储。