首先localStorage和sessionStorage都是用来存储客户端临时信息的对象。说白了就是把用户输入的信息放在本地中，通常用于记住密码这一类需要实现存储数据的功能。通常我们自己写的网页每次刷新后数据就自动消失了，而这两个方法可以让其刷新完毕过后还保留其中用户输入的数据
这里就用到loaclStorage和sessionStorage方法
其两者的特点如下：
1、用来存储临时信息
2、只能存放字符串类型的对象
3、localStorage生命周期是永久
4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
5、不同的浏览器是不能共享localStorage或着sessionStorage中的信息
下面说一下localStorage（）方法：
看这个代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>localStorage</title> <style> input{ width: 150px; height: 30px; border: black 1px solid; outline: none; padding-left: 20px; box-sizing: border-box; } button{ width: 150px; height: 30px; border: solid 1px #000; font-size: 14px; display: block; margin: 10px 0; } </style> </head> <body> <input type="text" name="" placeholder="请输入您的数据" id=""> <hr> <button id="set">存储本地的数据</button> <button id="get">获取本地的数据</button> <button id="remove">删除本地的数据</button> <button id="delete">清空所有数据</button> <script> var btn_ipt = document.querySelector('input'); var p = document.querySelector('p') var btn_set = document.getElementById('set'); var btn_get = document.getElementById('get'); var btn_remove = document.getElementById('remove'); var btn_del = document.getElementById('delete'); btn_set.onclick = function () { var val = btn_ipt.value window.localStorage.setItem('username',val); } btn_get.onclick = function(){ console.log(window.localStorage.getItem('username')) } btn_remove.onclick = function(){ window.localStorage.removeItem('username'); } btn_del.onclick = function(){ window.localStorage.clear(); } </script> </body> </html>
存储本地的数据 效果如下
如果刷新浏览器的话，这些数据也不会消失，会存储在本地
获取本地的数据 效果如下
删除本地的数据和清空所有数据 效果如下：
这里注意一下：localStorage数据是永久的，无论是关闭页面还是换个新的页面导入链接他的数据都还在，但是在浏览器不一样的情况下打开是没有数据的
360浏览器：
谷歌浏览器：
下面说一下
sessionStorage
它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空
看这个例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sessionStorage方法</title> <style> input { width: 140px; height: 26px; background-color: #fff; border: 1px solid #ccc; margin: 0 0 30px 0; font-size: 14px; } button { width: 140px; height: 30px; background-color: #fff; border: 1px solid #ccc; cursor: pointer; font-size: 14px; display: block; margin: 10px 0; } </style> </head> <body> <input type="text" name="" placeholder="请输入您的数据" id=""> <hr> <button id="set">存储本地的数据</button> <button id="get">获取本地的数据</button> <button id="remove">删除本地的数据</button> <button id="delete">清空所有数据</button> <script> var btn_ipt = document.querySelector('input'); var p = document.querySelector('p') var btn_set = document.getElementById('set'); var btn_get = document.getElementById('get'); var btn_remove = document.getElementById('remove'); var btn_del = document.getElementById('delete'); var obj = { 'name': 'NanChen', 'age': 86, 'sex': '男' } btn_set.onclick = function () { var val = btn_ipt.value window.sessionStorage.setItem('username',val); } btn_get.onclick = function(){ console.log(window.sessionStorage.getItem('username')) } btn_remove.onclick = function(){ window.sessionStorage.removeItem('username'); } btn_del.onclick = function(){ window.sessionStorage.clear(); }
如果这里新建一个页面把链接导入是不会存储数据的，把页面关闭也不会存储之前的信息
如何用此方法来存储对象？
这是一个对象obj
var obj = { 'name': 'NanChen', 'age': 86, 'sex': '男' }
如果直接存储的话会出现下面这个问题
window.sessionStorage.setItem('username',obj);
如果用上面那种方法存储对象不会得到信息，只会出现Object
解决办法：
var boj1 = JSON.stringify(obj) // 转换为字符串 window.sessionStorage.setItem('username',obj1);
如何用此方法获取对象数据？
这样？
console.log(window.sessionStorage.getItem('username'))
这里也是不行的。那这边就要使用JSON.stringify()方法来获取
JSON.stringify() ：用于将 JavaScript 值转换为 JSON 字符串
正确获取对象数据的方法：
console.log(JSON.parse(window.sessionStorage.getItem('username')));
效果如下：
总结
一、window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据：
sessionStorage.setItem(key, value)
获取数据：
sessionStorage.getItem(key)
删除数据：
sessionStorage.removeItem(key)
清空数据：(所有都清除掉)
sessionStorage.clear()
二、window.localStorage
1、声明周期永久生效，除非手动删除 否则关闭页面也会存在
2、可以多窗口同一浏览器可以共享
3、以键值对的形式存储使用
存储数据： localStorage.setItem(key, value) 获取数据： localStorage.getItem(key) 删除数据： localStorage.removeItem(key) 清空数据：(所有都清除掉) localStorage.clear()
