Vue之浏览器本地存储-实现搜索历史功能

最新推荐文章于 2024-06-10 20:36:00 发布

咸鱼gg

最新推荐文章于 2024-06-10 20:36:00 发布

阅读量384

点赞数

分类专栏： vue 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/m0_51029657/article/details/120350502

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

干什么用的？

一般用来做搜索历史
在这里插入图片描述

本地存储 localstorage

api：

增：localStorage.setItem(key,value）
删：删除指定key的 localStorage.removeItem(key)
删：删除所有 localStorage.clear()
查：localStorage.getItem(key)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<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('msg2',666)
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

在这里插入图片描述

会话存储sessionstorage

会话存储的api一模一样同理

咸鱼gg

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue之浏览器本地存储-实现搜索历史功能

干什么用的？一般用来做搜索历史本地存储 localstorageapi：增：localStorage.setItem(key,value）删：删除指定key的 localStorage.removeItem(key)删：删除所有 localStorage.clear()查：localStorage.getItem(key)<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> &
复制链接

扫一扫