本地存储有两个:sessionStorage,localStorage
sessionStorage和localStorage的区别
<html>
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">删除所有数据</button>
</html>
<script>
// 获取元素
var ipt = document.querySelector('input')
var set = document.querySelector('.set')
var get = document.querySelector('.get')
var remove = document.querySelector('.remove')
var del = document.querySelector('.del')
// 这个是sessionStorage存储
// 存储数据
set.addEventListener('click',function(){
var val = ipt.value
sessionStorage.setItem('name',val)
})
// 获取数据
get.addEventListener('click',function(){
console.log(sessionStorage.getItem('name'));
})
// 删除一条数据
remove.addEventListener('click',function(){
sessionStorage.removeItem('name')
})
// 删除所有数据
del.addEventListener('click',function(){
sessionStorage.clear()
})
// 这个是localStorage存储
// 存储数据
set.addEventListener('click',function(){
var val = ipt.value
localStorage.setItem('username',val)
localStorage.setItem('pwd',val)
})
// 获取数据
get.addEventListener('click',function(){
console.log(localStorage.getItem('username'));
})
// 删除一条数据
remove.addEventListener('click',function(){
localStorage.removeItem('username');
})
// 删除全部数据
del.addEventListener('click',function(){
localStorage.clear();
})
</script>