WebStorage本地存储

2023-12-30 16:44

文章标签 存储本地 webstorage

本文主要是介绍WebStorage本地存储，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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,第二个元素对应valuelocalStorage.setItem('李四', 'hello')//虽然传入的620为Number类型,但传入localStorage时自动转换成字符串型localStorage.setItem('李三', 620)// 传入对象时需要转换成JSON格式,不然对象都是[Object,object ]。JSON.stringify() 方法用于将 JavaScript 对象或值转换为一个 JSON 字符串。localStorage.setItem('p',JSON.stringify(p))}
function readDate(){// 获取数值时只需要传入key值来获取valueconsole.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>

这篇关于WebStorage本地存储的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！