js中localStorage存储的使用

最新推荐文章于 2024-06-27 20:21:48 发布

钱端攻城狮

最新推荐文章于 2024-06-27 20:21:48 发布

阅读量621

点赞数 1

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

本文链接：https://blog.csdn.net/m0_54932975/article/details/123883655

版权

HTML5 localStorage 本地存储跨页面传值字符串存储

关键词由CSDN通过智能技术生成

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	/*
	 localStorage本地存储  HTML5的新技术!
	 特点:
	 1.长久存储,没有时间限制
	 2.自带增删改查的函数,特别好用!!
	 3.localStorage 是系统提供的全局对象,直接访问即可!!
	 重要:
	 localStorage不仅做本地存储,以后更多的功能是可以跨页面传值!
	 页面传值,才是它更好用的功能!!!
	 因为浏览器只有一个,所以其存储数据的位置也只有一个!那就意味着无论你从哪个页面将数据存储,它们都是存在同一个对象localStorage中.那么你就能从任意页面将数据取出!!!
	 
	 
	 
	 */
	
//	console.log(localStorage);
	//1.增  就是存储数据
	//写法1  对象.属性
//	localStorage.username = "Aurora";
//	localStorage.passwd = "666";
	//写法2  索引的写法 对象["属性名"]
//	localStorage["age"] = 20;
//	localStorage["phone"] = "15362837489";
	//写法3 localStorage自带的方法
//	localStorage.setItem("sex", "女");
//	localStorage.setItem("hobby", ["唱", "跳", "rap"]);
	
	//2.修改 跟增数据一样直接访问属性即可
//	localStorage.passwd = "123321";
//	localStorage.age = 18;
//	localStorage.setItem("sex", "小姐姐");
	//以上三种写法  修改数据一样适用! 其实系统就是看你操作的属性是否存在!属性不存在那就是新增,属性存储那就是修改!!
	//需要注意:localStorage只能存储字符串,如果存储的是数组或者其他类型数据;都会先转为字符串,再存储!!!!!!!!!
	console.log(localStorage);
	
	//3.查 就是获取值 从浏览器中取出值! 以下三种随便都可以!!只要属性名确实存在!就能取值!
	console.log(localStorage.username);
	console.log(localStorage["sex"]);
	console.log(localStorage.getItem("passwd"));
	//set赋值   get取值
	//item 中文翻译 条目;  属性名+属性值这样一对一对的数据,就是一个条目!!
	//4.删除  
//	localStorage.removeItem("sex");
//	localStorage.removeItem("phone");
	//5.清空操作
//	localStorage.clear();
	
	
	
</script>