相同點：
都存儲于客戶端
都是不可跨域
不同點：
localStorage
始終有效，窗口或瀏覽器關(guān)閉也一直保存鞠鲜，用于持久化的本地儲难菌，除非主動刪除數(shù)據(jù)珠移，否則數(shù)據(jù)是永遠(yuǎn)不會過期的的畴。
sessionStorage
存儲的數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲足淆，僅僅是會話級別的存儲巢块。在打開一個頁面時記錄sessionStorage,當(dāng)你把頁面或者瀏覽器關(guān)閉時session中的數(shù)據(jù)即銷毀
localStorage 的優(yōu)勢
localStorage 拓展了 cookie 的 4K 限制。
localStorage 可以將第一次請求的數(shù)據(jù)直接存儲到本地巧号，這個相當(dāng)于一個 5M 大小的針對于前端頁面的數(shù)據(jù)庫族奢，相比于 cookie 可以節(jié)約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的丹鸿。
localStorage 的局限
瀏覽器的大小不統(tǒng)一越走，并且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。
目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換廊敌。
localStorage在瀏覽器的隱私模式下面是不可讀取的铜跑。
localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間骡澈，會導(dǎo)致頁面變卡锅纺。
localStorage不能被爬蟲抓取到。
sessionStorage的小demo
特點：
僅在當(dāng)前瀏覽器窗口關(guān)閉或者頁面關(guān)閉前有效肋殴，不能持久保持
存儲的數(shù)據(jù)只有在同一個會話中的頁面才能訪問
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 = "";?
? ? ? ? ? ? }?
? ? ? ? ? ? //儲存數(shù)據(jù)?
? ? ? ? ? ? function setInfo(name) {?
? ? ? ? ? ? ? ? var storage = window.sessionStorage;?
? ? ? ? ? ? ? ? storage.setItem('name', name);?
? ? ? ? ? ? }?
? ? ? ? ? ? //顯示數(shù)據(jù)?
? ? ? ? ? ? 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.設(shè)置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);
? ? ? }
從創(chuàng)建到刪除
<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>內(nèi)容:</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>
<
