相同点：
都存储于客户端
都是不可跨域
不同点：
localStorage
始终有效，窗口或浏览器关闭也一直保存，用于持久化的本地储，除非主动删除数据，否则数据是永远不会过期的。
sessionStorage
存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。在打开一个页面时记录sessionStorage,当你把页面或者浏览器关闭时session中的数据即销毁
localStorage 的优势
localStorage 拓展了 cookie 的 4K 限制。
localStorage 可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
localStorage 的局限
浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
localStorage在浏览器的隐私模式下面是不可读取的。
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
localStorage不能被爬虫抓取到。
sessionStorage的小demo
特点：
仅在当前浏览器窗口关闭或者页面关闭前有效，不能持久保持
存储的数据只有在同一个会话中的页面才能访问
sessionStorage1.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
input{
width: 300px;
height: 30px;
border-radius: 4px;
border: none;
border: 1px solid #eeeeee;
}
input[type=button] {
width: 80px;
height: 40px;
background-color: #C5C5C5;
color: #fff;
font-weight: bold;
}
</style>
<body>
<input type="button" value="Login" onclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" onclick="show()" />
<a href="sessionStorage2.html" target="_blank">33.html</a>
</body>
<script>
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//储存数据
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name);
}
//显示数据
function show() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
document.getElementById("text").value = str;
}
</script>
</html
sessageStorage2.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var str = window.sessionStorage;
alert(str.getItem("name"));
</script>
</head>
<body>
</body>
</html>
1.设置sessionStorage
Storage.set = function(name, val) {
sessionStorage.setItem(name, val);
}
2.获取sessionStorage
Storage.get = function(name) {
return sessionStorage.getItem(name);
}
3.删除sessionStorage
Storage.del = function(name) {
sessionStorage.removeItem(name);
}
从创建到删除
<html>
<head>
<title>sessionStorage</title>
</head>
<body>
<script>
const Storage = {};
Storage.get = function(name) {
return sessionStorage.getItem(name);
}
Storage.set = function(name, val) {
sessionStorage.setItem(name, val);
}
Storage.del = function(name) {
sessionStorage.removeItem(name);
}
Storage.set("status", "OK");
Storage.set("quit", "value");
//Storage.del("status");
</script>
</body>
</
localStorage
localStorage在浏览器的隐私模式下面是不可读取的
localStorage 属于永久性存储 除非手动删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>留言板</title>
<style type="text/css">
body{
display: flex;
justify-content: center;
align-items: center;
height: 600px;
}
textarea {
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 38px;
}
input[type=button] {
width: 90px;
height: 40px;
background-color: #C5C5C5;
border-radius: 5px;
font-weight: bold;
border: none;
}
</style>
</head>
<body>
<div>
<h2>内容:</h2>
<br />
<textarea id="txt" cols="60" rows="10"></textarea>
<br />
<input type="button" value = "clear" id="btn_clear">
</div>
<div id="msg"></div>
</body>
<script type="text/javascript">
window.onload =function() {
var storage = window.localStorage;
var text = document.getElementById('txt');
var msg = document.getElementById("msg");
if (!storage.getItem("save")){
storage.setItem("save","");
}
var savevalue =localStorage.getItem("save");
if (savevalue != "") {
text.value = savevalue;
}
setInterval(save,2000);
function save(){
storage.setItem("save",text.value);
};
btn_clear.onclick = function(){
storage.removeItem("save");
text.value = "";
};
};
</script>
<
