本地存储

最新推荐文章于 2024-07-18 22:15:17 发布

菜鸟级码农小林

最新推荐文章于 2024-07-18 22:15:17 发布

阅读量122

点赞数

分类专栏： JavaScript html 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_59735348/article/details/124879328

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

html

20 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML5中的两种本地存储方式——sessionStorage和localStorage，并通过实例展示了它们的使用方法。sessionStorage用于存储会话期间的数据，而localStorage则可以长期保存数据。文章中提供了存储、获取、删除单条及全部数据的JavaScript代码示例，帮助读者理解两者的区别和应用场景。

摘要由CSDN通过智能技术生成

本地存储有两个：sessionStorage，localStorage

sessionStorage和localStorage的区别

<html>
    <input type="text">
	<button class="set">存储数据</button>
	<button class="get">获取数据</button>
	<button class="remove">删除数据</button>
	<button class="del">删除所有数据</button>
</html>
<script>
        // 获取元素
		var ipt = document.querySelector('input')
		var set = document.querySelector('.set')
		var get = document.querySelector('.get')
		var remove = document.querySelector('.remove')
		var del = document.querySelector('.del')
		// 这个是sessionStorage存储
		// 存储数据
		set.addEventListener('click',function(){
			var val = ipt.value
			sessionStorage.setItem('name',val)
		})
		// 获取数据
		get.addEventListener('click',function(){
			console.log(sessionStorage.getItem('name'));
		})
		// 删除一条数据
		remove.addEventListener('click',function(){
			sessionStorage.removeItem('name')
		})
		// 删除所有数据
		del.addEventListener('click',function(){
			sessionStorage.clear()
		})

		// 这个是localStorage存储
		// 存储数据
		set.addEventListener('click',function(){
			var val = ipt.value
			localStorage.setItem('username',val)
			localStorage.setItem('pwd',val)
		})
		// 获取数据
		get.addEventListener('click',function(){
			console.log(localStorage.getItem('username'));	
		})
		// 删除一条数据
		remove.addEventListener('click',function(){
			localStorage.removeItem('username');
		})
		// 删除全部数据
		del.addEventListener('click',function(){
			localStorage.clear();
		})
</script>

菜鸟级码农小林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储

本地存储有两个：sessionStorage，localStoragesessionStorage和localStorage的区别<html> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</butto.
复制链接

扫一扫

专栏目录