localStorage是全局的公共对象
浏览器关闭了后不丢失，是永久存在的。（runoob.com上Window localStorage 属性里的笔记很清晰）
// localStorage.user="sky";
console.log(localStorage.user);
能够看出，存储过localStorage.user后，下次直接打印，也还是存在的。
localStorage、sessionStorage、cookie三者的区别
WebStorage包括 localStorage、sessionStorage ，一般为了方便，总称localStorage。localStorage 和 sessionStorage都是window对象的属性
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的（为了共享一个cookie，放到顶级域当中；但localStorage放在哪都一样）。
什么是同源，找到一篇阮一峰大佬的文章：浏览器同源政策及其规避方法。 - Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
这里有一篇文章解释三者区别的，感觉特别详细：https://blog.csdn.net/lizhengxv/article/details/81541977
localStorage的建立&获取&删除
- localStorage的建立，有三种方式：
//以user=“sky”为例
localStorage.user="sky";
localStorage["user"]="sky";
localStorage.setItem("user","sky");
- localStorage的获取，有三种方式：
console.log(localStorage.user);
console.log(localStorage["user"]);
console.log(localStorage.getItem("user")
- localStorage的删除：
delete localStorage.user;
localStorage.removeItem("user");
- 清除所有localStorage存储：
localStorage.clear();
localStorage的一个小练习
localStorage.clear(); //每次清一下这个域的localstorage存储
//这个例子说明了一件事，localstorage是长时间存在的，除非你手动删他。就比如说京东购物车，在没登录之前，也能添加购物车，而且添加的元素不会再添加第二次，不过数量上会有变化；等登陆了，把数据一整合，就都放进去了。//这个list是为了不将这些localStorage的默认属性显示在页面里
var list=["length","key","getItem","setItem","removeItem","clear"];
var ul;
localStorage.numAdd=50; //存储一个key为c的本地存储的值为50，下面会实现每次点击页面，就会增加1的功能，这是对自身存储的改变的一个显示看看。
init();
function init(){//localStorage 和 sessionStorage都是window对象的属性window.addEventListener("storage",storageHandler);//在window上添加storage事件createUI();//每次创建ul标签，把localstorage里的东西用li标签展示出来document.addEventListener("click",clickHandler);//针对自身网页的存储效果
}
function clickHandler(e){localStorage.numAdd=Number(localStorage.numAdd)+1;//就简单改一下看下效果createUI();
}
function createUI(){if(ul){ul.remove();//将上次通信创建的ul标签删除，避免冗余ul=null;} ul=document.createElement("ul");for(let prop in localStorage){if(list.indexOf(prop)>-1)continue;//如果将要添加的属性已经在localstorage中存在，就不用再次添加了,屏蔽localstorage的默认属性let li=document.createElement("li");li.textContent=prop+":"+localStorage[prop];ul.appendChild(li);}console.log(ul);document.body.appendChild(ul);
}
function storageHandler(e){createUI();
}
结果：
这是localstorage对象里默认的属性，下面console.log(localStorage)，是个Storage对象，点看能看到这些默认属性。
屏蔽掉了localstorage的默认属性，只显示我们要看的。
然后在其他页面里存储一个localstorage属性及属性值。
