什么是本地存储呢？我们平常保存东西或者需要经过数据库，服务器，将数据存到数据库中，但有些时候我们要保存的数据没有必要存到数据库中，比如我们在网页输入的内容，我们想要刷新页面也不会清楚数据，这时本地存储就有了其价值
本地存储主要有以下几种特性：
数据存在浏览器中
读取方便
页面刷新不会丢失数据
只能存储字符串
这篇文章我们主要研究本地存储的两种方式：
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>
我们先存入两个数据：
删除所有数据后数据消失：
