前端基础之浏览器本地存储
如我们在一些网站中，去进行数据搜索，在浏览器中是有一个对于的存储的，并且我们可以去手动进行value的增删操作
LocalStroage的使用
并且将浏览器关闭之后，数据也会保存，除非用户手动清理数据或是清空缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空一个数据</button>
<script type="text/javascript">
let p={name:'张三',age:18}
function saveData(){
localStorage.setItem('msg','hello')
localStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log( localStorage.getItem('msg'))
const result= localStorage.getItem('person')
console.log( JSON.parse(result))
}
function deleteData(){
localStorage.removeItem('msg')
}
function deleteAllData(){
localStorage.clear('msg')
}
</script>
</body>
</html>
SessionStroage
浏览器关闭之后，数据就会清空，与localStroage数据持久化不一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我清空一个数据</button>
<script type="text/javascript">
let p={name:'张三',age:18}
function saveData(){
sessionStorage.setItem('msg','hello')
sessionStorage.setItem('person',JSON.stringify(p))
}
function readData(){
console.log( sessionStorage.getItem('msg'))
const result= sessionStorage.getItem('person')
console.log( JSON.parse(result))
}
function deleteData(){
sessionStorage.removeItem('msg')
}
function deleteAllData(){
sessionStorage.clear('msg')
}
</script>
</body>
</html>
