利用原生手撕本地存储实现 存储、获取、删除、清空功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"/>
<button class="set">存储</button>
<button class="get">获取</button>
<button class="remove">删除</button>
<button class="del">清空</button>
</body>
</html>
<script type="text/javascript">
// 吧用户存储在用户的浏览器中
// 页面刷新不丢失
// session---5M local---20M
// 存进去是字符串
// sessionStoragr(key,value)---关闭页面消失
var ipt = document.querySelector('input')
var set = document.querySelector('.set')
set.addEventListener('click',function(){
// 点击储存
var val = ipt.value;
sessionStorage.setItem('uname',val)
})
// 获取
var get = document.querySelector('.get')
get.addEventListener('click',function(){
console.log(sessionStorage.getItem('uname'))
})
// 删除
var remove = document.querySelector('.remove')
remove.addEventListener('click',function(){
sessionStorage.removeItem('uname')
})
// 全删
var del = document.querySelector('.del')
del.addEventListener('click',function(){
sessionStorage.clear()
})
</script>
- 存储本地数据:可以使用localStorage或sessionStorage对象来存储本地数据。localStorage对象可以在浏览器关闭后仍然保留数据,而sessionStorage对象只能在当前会话中保留数据。存储数据的方法如下:
localStorage.setItem(key, value); // 存储数据 sessionStorage.setItem(key, value); // 存储数据
- 获取本地数据:可以使用localStorage或sessionStorage对象来获取本地数据。获取数据的方法如下:
localStorage.getItem(key); // 获取数据 sessionStorage.getItem(key); // 获取数据
2.删除本地数据:可以使用removeItem()方法来删除本地数据。删除数据的方法如下:
localStorage.removeItem(key); // 删除数据 sessionStorage.removeItem(key); // 删除数据
3.清除本地数据:可以使用clear()方法来清除所有本地数据。清除数据的方法如下:
localStorage.clear(); // 清除所有数据 sessionStorage.clear(); // 清除所有数据