存储对象sessionStorage与localStorage

先实例代码:

		<a href="index1.html">点击跳转</a>
		<a target="_blank" href="index1.html">新窗口打开</a>
		<script>
			//基本类型
			let app = "Hello World!";
			sessionStorage.setItem("getApp",app);
			
			//引用类型
			let obj = {
				name:"张三",
				age:18,
				like:"翠花",
				hobby:["唱","跳","rap"]
			}
			let JSON_obj = JSON.stringify(obj);
			localStorage.setItem("obj",JSON_obj);
		</script>

index1.html

		<script>
			let ap = sessionStorage.getItem("getApp");
			//alert("ap值为:"+ap);
			console.log(ap);
			document.writeln(ap);
			
			let JSON_obj = localStorage.getItem("obj");
			let obj = JSON.parse(JSON_obj);
			console.log(obj);
		</script>

点击跳转,可以看到控制台使用sessionStorage与localStorage都被获取到了.

新窗口打开,控制台只获取到了localStorage存储的数据.

基本类型与引用类型存储和取出不一样,引用类型需序列化存储,再反序列化取出.
否则只会取出[Object object]

sessionStorage与之相关的是标签页,使用了新窗口打开将会失效.
当然浏览器关闭也会失效.

而localStorage并不会,它唯一的一种失效的方式就是手动去删除.(同一浏览器下)
因为localStorage是存储在浏览器本地的,更换浏览器会读取不到(如果之前未存入过)
如下:

		<script>
			let ap = sessionStorage.getItem("getApp");
			//alert("ap值为:"+ap);
			console.log(ap);
			document.writeln(ap);
			
			localStorage.removeItem("obj");
			let JSON_obj = localStorage.getItem("obj");
			let obj = JSON.parse(JSON_obj);
			console.log(obj);	
		</script>

控制台输出: