WebStorage本地存储

2023-12-29 16:56:07

WebStorage

  • WebStorage包含sessionStorage和localStorage。其存储内存一把在5MB左右(不同浏览器不同)

  • localStorage存储,当浏览器关闭在开启存储的数据不会被清除。

  • 清除浏览记录或操作localStorage可清除存储的数据

  • sessionStorage和localStorage的代码书写一致，当浏览器关闭在开启存储的数据会被清除。

  • <!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>
 ? ?<h2>localStorage</h2>
 ? ?<!-- onclick点击事件 -->
 ? ?<button onclick="saveDate()">点我保存一个数据</button>
 ? ?<button onclick="readDate()">点我读取一个数据</button>
 ? ?<button onclick="deleteDate()">点我删除李四数据</button>
 ? ?<button onclick="clearDate()">点我清空数据</button>
 ? ?<script type="text/javascript">
 ? ? ? let ?p = {name:'张三',age:18}
?
 ? ? ? function saveDate(){
 ? ? ? ?// 将'李四', 'hello'存储到localStorage,括号内的第一个元素对应key,第二个元素对应value
 ? ? ? ? ? ?localStorage.setItem('李四', 'hello')
 ? ? ? ?//虽然传入的620为Number类型,但传入localStorage时自动转换成字符串型
 ? ? ? ? ? ?localStorage.setItem('李三', 620)
 ? ? ? ?// 传入对象时需要转换成JSON格式,不然对象都是[Object,object ]。JSON.stringify() 方法用于将 JavaScript 对象或值转换为一个 JSON 字符串。
 ? ? ? ? ? ?localStorage.setItem('p',JSON.stringify(p))
 ? ? ? }
?
 ? ? ? function readDate(){
 ? ? ? ?// 获取数值时只需要传入key值来获取value
 ? ? ? ? ? ?console.log(localStorage.getItem('李四'));
 ? ? ? ? ? ?console.log(localStorage.getItem('李三'));
 ? ? ? ?// 首先获取p对象
 ? ? ? ? ? ?const person = (localStorage.getItem('p'));
 ? ? ? ?// 使用 JSON.parse() 方法，你可以将这个 JSON 字符串转换为一个 JavaScript 对象
 ? ? ? ? ? ?console.log(JSON.parse(person));
 ? ? ? }
 ? ? ? function deleteDate (){
 ? ? ? ? ? ?localStorage.removeItem('李四')
 ? ? ? }
 ? ? ? function clearDate (){
 ? ? ? ? ? ?localStorage.clear()
 ? ? ? }
 ? ?</script>
?
</body>
 ? 
</html>

文章来源:https://blog.csdn.net/Yyds12300/article/details/135291790
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。