您的位置: 首页  >  文章  >  BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

分类: 文章 • 2025-03-08 12:29:47

BOM window 对象

window 对象是全局对象，所有在全局作用域中声明的变量、对象、函数都会变成 window 对象的属性、对象、方法，处于所有对象的顶级。window对象，不需要通过 new 关键字创建实例，只需要通过“对象名.成员”的格式访问其属性和方法。
HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
等同于：
document.getElementById("header");
由此，我们可以明确规律：

  • 全局变量 是 window 对象的属性。
  • 全局函数 是 window 对象的方法。

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

基于 window 对象是全局对象的概念，它下属的所有全局变量和函数都是它的属性，并且所有原生的构造函数及其它函数都存在与它的命名空间下，因此，在调用 window 对象的方法和属性时，可以省略 window 对象的引用。但在局部作用域中定义不会归入 window 对象名下，只有在全局作用域中定义才会被自动归入到 window 对象名下。

<script>
	var NameNew="Hevate";  //定义变量
	var ArrNew=new Array("one","two","three");  //定义对象
	function MyName(){  // 定义函数，不会直接执行，需要经过调用
		var NameNew = "liu"
		console.log("因为 MyName() 函数存在于全局作用域中，所以 this 被映射到 window，this.MyName 即是 window.MyName")
		console.log("MyName() 不加上 window 或 this："+NameNew)
		console.log("MyName() 加上 this："+this.NameNew)
		console.log("MyName() 加上 window："+window.NameNew)  
	}
	/* 输出变量*/
	window.console.info("对于变量，加上 window 输出："+NameNew)  //输出 Hevate
	console.info("对于变量，不加 window 同样输出："+NameNew)
	/* 输出对象*/
	window.console.log("对于对象，加上 window 输出："+ArrNew)  //输出 one,two,three
	console.log("对于对象，加上 window 输出结果相同："+ArrNew)
	/* 输出函数*/
	window.MyName()  //调用 函数 MyName()
	MyName()  //调用 函数 MyName()
</script>

因为 MyName() 函数存在于全局作用域中，所以 this 被映射到 window，this.MyName 即是 window.MyName

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

Javascript 存储对象 Web 存储 API

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 在浏览器中存储 key/value 对，拓展了cookie的4K限制，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 在浏览器中存储 key/value 对，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

基本语法 window.localStorage window.sessionStorage
保存数据 localStorage.setItem("key","value");
读取数据 var theName = localStorage.getItem("key");
删除数据 localStorage.removeItem("key");

属性 描述
length 返回存储对象中包含多少条数据。
方法 描述
key(n) 返回存储对象中第 n 个键的名称
getItem(keyname) 返回指定键的值
setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname) 移除键
clear() 清除存储对象中所有的键

判断浏览器是否支持 localStorage 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="nav"></div>
	</body>
	<script type="text/javascript">
		function checkLocalStorage(){
			if(!window.localStorage){
				console.log("浏览器不支持 localStorage 对象");
				/* 在js中return 语句只能放在function中，会报错*/
				return false;
			}else{
				console.log("浏览器支持 localStorage 对象")
			}
		}
		checkLocalStorage()
	</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

localStorage 对象的三种写入和读取方法

三种写入方法

MyStorage[“a”] = 1; // 写入 a 字段，value值为 1
MyStorage.b = 2; // 写入 b 字段，value值为 2
MyStorage.setItem(“c”,3) //写入 c 字段，value值为 3

三种读取方法

console.log(“a：”+typeof MyStorage.a) // 输出为 string
console.log(“b：”+typeof MyStorage.getItem(“b”)) //输出 string
console.log(“c：”+typeof MyStorage[“c”]) //输出 string

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="nav"></div>
	</body>
	<script type="text/javascript">
		function checkLocalStorage(){
			if(!window.localStorage){
				console.log("浏览器不支持 localStorage 对象");
				/* 在js中return 语句只能放在function中，会报错*/
				 return false;
			}else{
				console.log("浏览器支持 localStorage 对象")
				var MyStorage = window.localStorage;  // 创建 localStorage 对象，并赋值给变量 MyStorage
				/* 三种 localStorage 对象中写入的 key-value 对的方式*/
				MyStorage["a"] = 1;  // 写入 a 字段，value值为 1
				MyStorage.b = 2;  // 写入 b 字段，value值为 2
				MyStorage.setItem("c",3)  //写入 c 字段，value值为 3
				/* localStorage 对象，无论写入的是什么值，都会转换成为字符串形式进行存储*/
				console.log("a："+typeof MyStorage.a)  // 输出为 string
				console.log("b："+typeof MyStorage.getItem("b"))  //输出 string
				console.log("c："+typeof MyStorage["c"])  //输出 string
			}
		}
		checkLocalStorage()
	</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

localStorage 对象更改对应key的value值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="nav"></div>
	</body>
	<script type="text/javascript">
		function checkLocalStorage(){
			if(!window.localStorage){
				console.log("浏览器不支持 localStorage 对象");
				/* 在js中return 语句只能放在function中，会报错*/
				 return false;
			}else{
				console.log("浏览器支持 localStorage 对象")
				var MyStorage = window.localStorage;  // 创建 localStorage 对象，并赋值给变量 MyStorage
				/* 三种 localStorage 对象中写入的 key-value 对的方式*/
				MyStorage["a"] = 1;  // 写入 a 字段，value值为 1
				MyStorage.b = 2;  // 写入 b 字段，value值为 2
				MyStorage.setItem("c",3)  //写入 c 字段，value值为 3
				/* localStorage 对象，无论写入的是什么值，都会转换成为字符串形式进行存储*/
				console.log("a："+typeof MyStorage.a)  // 输出为 string
				console.log("b："+typeof MyStorage.getItem("b"))  //输出 string
				console.log("c："+typeof MyStorage["c"])  //输出 string
				/* 更改 localStorage 对象中对应key的value值*/
				MyStorage.c = "3_c";
				console.log("更改之后的 c 字段："+MyStorage.c)  //输出字符串 3_c
			}
		}
		checkLocalStorage()
	</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

localStorage 对象删除其中指定的 key/value 对

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div class="nav"></div>
</body>
<script type="text/javascript">
	function checkLocalStorage(){
		if(!window.localStorage){
			console.log("浏览器不支持 localStorage 对象");
			/* 在js中return 语句只能放在function中，会报错*/
			 return false;
		}else{
			console.log("浏览器支持 localStorage 对象")
			var MyStorage = window.localStorage;  // 创建 localStorage 对象，并赋值给变量 MyStorage
			/* 三种 localStorage 对象中写入的 key-value 对的方式*/
			MyStorage["a"] = 1;  // 写入 a 字段，value值为 1
			MyStorage.b = 2;  // 写入 b 字段，value值为 2
			MyStorage.setItem("c",3)  //写入 c 字段，value值为 3
			/* localStorage 对象，无论写入的是什么值，都会转换成为字符串形式进行存储*/
			console.log("a："+typeof MyStorage.a)  // 输出为 string
			console.log("b："+typeof MyStorage.getItem("b"))  //输出 string
			console.log("c："+typeof MyStorage["c"])  //输出 string
			/* 更改 localStorage 对象中对应key的value值*/
			MyStorage.c = "3_c";
			console.log("更改之后的 c 字段："+MyStorage.c)  //输出字符串 3_c
			/* 删除 localStorage 对象中某个指定的key-value值*/
			MyStorage.removeItem("a")  //删除 localStorage 对象中的 a 字段
			console.log("当字段 a 删除后，再打印 a 时，输出："+MyStorage.getItem("a"))  // null
		}
	}
	checkLocalStorage()
</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

遍历获取 localStorage 对象中的 key/value 对

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div class="nav"></div>
</body>
<script type="text/javascript">
	function checkLocalStorage(){
		if(!window.localStorage){
			console.log("浏览器不支持 localStorage 对象");
			/* 在js中return 语句只能放在function中，会报错*/
			 return false;
		}else{
			console.log("浏览器支持 localStorage 对象")
			var MyStorage = window.localStorage;  // 创建 localStorage 对象，并赋值给变量 MyStorage
			/* 三种 localStorage 对象中写入的 key-value 对的方式*/
			MyStorage["a"] = 1;  // 写入 a 字段，value值为 1
			MyStorage.b = 2;  // 写入 b 字段，value值为 2
			MyStorage.setItem("c",3)  //写入 c 字段，value值为 3
			/* localStorage 对象，无论写入的是什么值，都会转换成为字符串形式进行存储*/
			console.log("a："+typeof MyStorage.a)  // 输出为 string
			console.log("b："+typeof MyStorage.getItem("b"))  //输出 string
			console.log("c："+typeof MyStorage["c"])  //输出 string
			/* 更改 localStorage 对象中对应key的value值*/
			MyStorage.c = "3_c";
			console.log("更改之后的 c 字段："+MyStorage.c)  //输出字符串 3_c
			/* 删除 localStorage 对象中某个指定的key-value值*/
			MyStorage.removeItem("a")  //删除 localStorage 对象中的 a 字段
			console.log("当字段 a 删除后，再打印 a 时，输出："+MyStorage.getItem("a"))  // null
			/* 获取 localStorage 对象中的所有 key/value 对*/
			console.log(MyStorage)
			for(var i=0;i<MyStorage.length;i++){
				var KeyValue = MyStorage.key(i);
				console.log(KeyValue);
			}
		}
	}
	checkLocalStorage()
</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

删除 localStorage 对象中所有的键值对

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div class="nav"></div>
</body>
<script type="text/javascript">
	function checkLocalStorage(){
		if(!window.localStorage){
			console.log("浏览器不支持 localStorage 对象");
			/* 在js中return 语句只能放在function中，会报错*/
			 return false;
		}else{
			console.log("浏览器支持 localStorage 对象")
			var MyStorage = window.localStorage;  // 创建 localStorage 对象，并赋值给变量 MyStorage
			/* 三种 localStorage 对象中写入的 key-value 对的方式*/
			MyStorage["a"] = 1;  // 写入 a 字段，value值为 1
			MyStorage.b = 2;  // 写入 b 字段，value值为 2
			MyStorage.setItem("c",3)  //写入 c 字段，value值为 3
			/* localStorage 对象，无论写入的是什么值，都会转换成为字符串形式进行存储*/
			console.log("a："+typeof MyStorage.a)  // 输出为 string
			console.log("b："+typeof MyStorage.getItem("b"))  //输出 string
			console.log("c："+typeof MyStorage["c"])  //输出 string
			/* 更改 localStorage 对象中对应key的value值*/
			MyStorage.c = "3_c";
			console.log("更改之后的 c 字段："+MyStorage.c)  //输出字符串 3_c
			/* 删除 localStorage 对象中某个指定的key-value值*/
			MyStorage.removeItem("a")  //删除 localStorage 对象中的 a 字段
			console.log("当字段 a 删除后，再打印 a 时，输出："+MyStorage.getItem("a"))  // null
			/* 获取 localStorage 对象中的所有 key/value 对*/
			console.log(MyStorage)
			for(var i=0;i<MyStorage.length;i++){
				var KeyValue = MyStorage.key(i);
				console.log(KeyValue);
			}
			/* 清除 localStorage 对象中的所有键值对*/
			MyStorage.clear();
			console.log(MyStorage);
			console.log(MyStorage.length);  // 存储对象中包含数据条数为 0
		}
	}
	checkLocalStorage()
</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

JSON 存入 localStorage 时的注意事项

由于 localStorage 会自动将localStorage转换成为字符串形式，因此在将 JSON 存入 localStorage 中时，需要使用 JSON.stringify() 方法，将 JSON 提前转换成为 JSON 字符串，否则存储的是对象的字符串而不是JSON内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body></body>
<script type="text/javascript">
	function checkLocalStorage(){
		if(!window.localStorage){
			console.log("浏览器不支持 localStorage 对象");
			/* 在js中return 语句只能放在function中，会报错*/
			 return false;
		}else{
            var MyStorage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            /* 如果上述的data 不转化为字符串，直接存储到 localStorage 对象里，结果就是 [object object]*/
            var d=JSON.stringify(data);
            MyStorage.setItem("MyData",d);
            console.log("JSON转化为字符串之后的存储内容："+MyStorage.MyData);  // 转化为字符串之后，结果就是data里面具体的内容
		}
	}
	checkLocalStorage()
</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

使用 JSON.parse() 方法，将 JSON 字符串转化成 JSON 对象

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body></body>
<script type="text/javascript">
	function checkLocalStorage(){
		if(!window.localStorage){
			console.log("浏览器不支持 localStorage 对象");
			/* 在js中return 语句只能放在function中，会报错*/
			 return false;
		}else{
            var MyStorage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            /* 如果上述的data 不转化为字符串，直接存储到 localStorage 对象里，结果就是 [object object]*/
            var d=JSON.stringify(data);
            MyStorage.setItem("MyData",d);
            console.log("JSON转化为字符串之后的存储内容："+MyStorage.MyData);  // 转化为字符串之后，结果就是data里面具体的内容
            /* 将 localStorage 中的JSON字符串转化为 JSON 对象输出*/
           var e = MyStorage.getItem("MyData");
           var JSONObj = JSON.parse(e);
           console.log(typeof JSONObj); // 输出 object
           console.log(JSONObj); // 输出 JSON 对象格式
		}
	}
	checkLocalStorage()
</script>
</html>

BOM 存储对象【1】web存储API localStorage sessionStorage JSON的存储和转化

Reference

JavaScript 存储对象

JSON.stringify()

localStorage 使用总结

相关推荐