什么是本地存储呢？我们平常保存东西或者需要经过数据库，服务器，将数据存到数据库中，但有些时候我们要保存的数据没有必要存到数据库中，比如我们在网页输入的内容，我们想要刷新页面也不会清楚数据，这时本地存储就有了其价值
本地存储主要有以下几种特性：
- 数据存在浏览器中
- 读取方便
- 页面刷新不会丢失数据
- 只能存储字符串
这篇文章我们主要研究本地存储的两种方式：
- window.sessionStorage
- window.localStorage
（ window 可省略 ）
一：window.sessionStorage
在开始讲解此方式前，我们先说明一个名词 ------- 生命周期，所谓生命周期，就是从创建到销毁经历的过程，window.sessionStorage 的生命周期就是关闭浏览器窗口就可将其销毁。
其特点如下：生命周期为关闭浏览器窗口，仅可同一页面可共享数据，以键值对的形式存储
数据的特性不过是增删查改：
-
sessionStorage.setItem (key, value)：存储数据
-
sessionStorage.getItem (key)：获取数据
-
sessionStorage.removeItem (key)：删除数据
- sessionStorage.clear ()：删除所有数据
sessionStorage.setItem (key, value)：
用于存储数据，以键值对的方式存入浏览器
<body> <input type="text"> <button>存储数据</button> <script> var text=document.querySelector('input'); var btn=document.querySelector('button'); btn.addEventListener('click',function(){ window.sessionStorage.setItem('id',text.value) }) </script> </body>
sessionStorage.getItem (key)：
用于获取数据，此处将存储的值给了文本框，让其重新显示
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <script> var text=document.querySelector('input'); var btnset=document.querySelector('.set'); var btnget=document.querySelector('.get'); btnset.addEventListener('click',function(){ //存储数据 window.sessionStorage.setItem('id',text.value); }) btnget.addEventListener('click',function(){ //获取数据 text.value= window.sessionStorage.getItem('id'); }) </script> </body>
sessionStorage.removeItem (key)：
用于删除存储的数据，一次只能删一个指定键的数据
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <script> var text=document.querySelector('input'); var btnset=document.querySelector('.set'); var btnget=document.querySelector('.get'); var btnremove=document.querySelector('.remove'); btnset.addEventListener('click',function(){ //存储数据 window.sessionStorage.setItem('id',text.value); }) btnget.addEventListener('click',function(){ //获取数据 text.value= window.sessionStorage.getItem('id'); }) btnremove.addEventListener('click',function(){ //获取数据 window.sessionStorage.removeItem('id'); }) </script> </body>存储后数据存在了浏览器中：
删除后数据完完全全被删除，无法再次获取：
sessionStorage.clear ()：
清除所有数据
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="clear">删除所有数据</button> <script> var text=document.querySelector('input'); var btnset=document.querySelector('.set'); var btnget=document.querySelector('.get'); var btnremove=document.querySelector('.remove'); var btnclear=document.querySelector('.clear'); btnset.addEventListener('click',function(){ //存储数据 window.sessionStorage.setItem('id',text.value); window.sessionStorage.setItem('pwd',text.value); }) btnget.addEventListener('click',function(){ //获取数据 text.value= window.sessionStorage.getItem('id'); }) btnremove.addEventListener('click',function(){ //获取数据 window.sessionStorage.removeItem('id'); }) btnclear.addEventListener('click',function(){ //获取数据 window.sessionStorage.clear(); }) </script> </body>我们先存入两个数据：
删除所有数据后数据消失：
二：window.localStorage
其特点如下：生命周期为永久生效的，关闭浏览器也会存在，除非手动删除，可以多个页面共享数据（同一个浏览器下），以键值对的形式存储
数据的特性增删查改和 sessionStorage 一样：
-
localStorage.setItem (key, value)：存储数据
-
localStorage.getItem (key)：获取数据
-
localStorage.removeItem (key)：删除数据
- localStorage.clear ()：删除所有数据
localStorage.setItem (key, value)：
存储数据，由于其生命周期为永久，所以即使关闭浏览器，再打开也会存在此数据
<body> <input type="text"> <button>存储数据</button> <script> var text=document.querySelector('input'); var btn=document.querySelector('button'); btn.addEventListener('click',function(){ window.localStorage.setItem('id',text.value) }) </script> </body>
localStorage.getItem (key)：
用于获取数据 ，用法与上均相同
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <script> var text=document.querySelector('input'); var btnset=document.querySelector('.set'); var btnget=document.querySelector('.get'); btnset.addEventListener('click',function(){ //存储数据 window.localStorage.setItem('id',text.value); }) btnget.addEventListener('click',function(){ //获取数据 text.value= window.localStorage.getItem('id'); }) </script> </body>
localStorage.removeItem (key)：
用于删除存储的数据，一次只能删一个指定键的数据
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <script> var text=document.querySelector('input'); var btnset=document.querySelector('.set'); var btnget=document.querySelector('.get'); var btnremove=document.querySelector('.remove'); btnset.addEventListener('click',function(){ //存储数据 window.localStorage.setItem('id',text.value); }) btnget.addEventListener('click',function(){ //获取数据 text.value= window.localStorage.getItem('id'); }) btnremove.addEventListener('click',function(){ //获取数据 window.localStorage.removeItem('id'); }) </script> </body>存储后数据存在了浏览器中：
删除后数据完完全全被删除，无法再次获取：
localStorage.clear ()：
清除所有数据
<body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="clear">删除所有数据</button> <script> var text=document.querySelector('input'); var btnset=document.querySelector('.set'); var btnget=document.querySelector('.get'); var btnremove=document.querySelector('.remove'); var btnclear=document.querySelector('.clear'); btnset.addEventListener('click',function(){ //存储数据 window.localStorage.setItem('id',text.value); window.localStorage.setItem('pwd',text.value); }) btnget.addEventListener('click',function(){ //获取数据 text.value= window.localStorage.getItem('id'); }) btnremove.addEventListener('click',function(){ //获取数据 window.localStorage.removeItem('id'); }) btnclear.addEventListener('click',function(){ //获取数据 window.localStorage.clear(); }) </script> </body>我们先存入两个数据：
删除所有数据后数据消失：