开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

1、JS中的本地存储:

使用JS向浏览器的某一个位置中存储一些内容，浏览器即使关闭了，存储的信息也不会销毁，当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息

本地存储的方案:

传统:cookie:把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取COOKIE的 session:把信息存储到服务器上的（服务器存储） HTML5:webStorage localStorage:永久存储在客户端的本地 sessionStorage:信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失了

HTML5规范提出了相关解决方案本地存储新特性

1数据存储在用户浏览器中
2设置、读取方便、甚至页面刷新不丢失数据
3容量较大，sessionStorage约5M、localStorage约20M
4只能存储字符串，可以将对象JSON.stringify() 编码后存储

1 window.sessionStorage

存储数据：sessionStorage.setItem(key, value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
删除所有数据：sessionStorage.clear()
1生命周期为关闭浏览器窗口
2在同一个窗口（页面）下数据可以共享
3以键值对的形式存储使用

2 window.localStorage

存储数据：localStorage.setItem(key, value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
1声明周期永久生效，除非手动删除否则关闭页面也会存在
2可以多窗口（页面）共享（同一浏览器可以共享）
3以键值对的形式存储使用

1 <input type="text">
2 <button class="set">存储数据</button>
3 <button class="get">获取数据</button>
4 <button class="remove">删除数据</button>
5 <button class="del">清空所有数据</button>
6 <script>
7 var ipt = document.querySelector('input');
8 var set = document.querySelector('.set');
9 var get = document.querySelector('.get');
10 var remove = document.querySelector('.remove');
11 var del = document.querySelector('.del');
12 set.addEventListener('click', function() {
13 var val = ipt.value;
14 localStorage.setItem('username', val);
15 })
16 get.addEventListener('click', function() {
17 console.log(localStorage.getItem('username'));
18 })
19 remove.addEventListener('click', function() {
20 localStorage.removeItem('username');
21 })
22 del.addEventListener('click', function() {
23 localStorage.clear();
24 })
25 </script>

js的本地存储

1、JS中的本地存储: