jQuery中localStorage及sessionStorage的使用

builder2991

已于 2023-06-26 16:51:55 修改

阅读量4.1k

点赞数 3

分类专栏： jquery 文章标签： jquery localStorage sessionStorage

于 2020-05-07 16:38:59 首次发布

本文链接：https://blog.csdn.net/low666/article/details/105974687

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery中localStorage及sessionStorage的使用

localStorage、sessionStorage理解

localStorage：在HTML5中，新加入的一个l特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
sessionStorage：也是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage与sessionStorage的区别

sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样。

localStorage的优势与局限

localStorage的优势

localStorage拓展了cookie的4K限制
localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
localStorage在浏览器的隐私模式下面是不可读取的
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到

sessionStorage的特点

同源策略限制：若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
单标签页限制：sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
只在本地存储：seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
存储方式：seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
支持sessionStorage的浏览器最小版本：IE8、Chrome 5。
适合场景：sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。

localStorage的使用

1.清空localStorage

localStorage.clear()    // undefined    
console.log(localStorage )           // Storage {length: 0}

在这里插入图片描述

2.存储数据

localStorage.setItem("name","builder") //存储名字为name值为builder的变量
localStorage.name = "builder"; // 等价于上面的命令
console.log(localStorage )  // Storage {name: "builder", length: 1}

在这里插入图片描述

3.读取数据

localStorage.getItem("name") //builder,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "builder"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
		console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i)));
	}

在这里插入图片描述

4.删除某个变量

localStorage.removeItem("name"); //undefined
console.log(localStorage )// Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

在这里插入图片描述

5.检查localStorage里是否保存某个变量

console.log(localStorage.hasOwnProperty('name')) // true
console.log(localStorage.hasOwnProperty('sex'))  // false

在这里插入图片描述

6.将数组转为本地字符串

var arr = ['1','2','3']; // ["1","2","3"]
localStorage.arr = arr //["1","2","3"]
console.log(localStorage.arr.toLocaleString()); // "1,2,3"

在这里插入图片描述

7.将JSON存储到localStorage里

var stu = {
		    a: {
		        name: "张三",
		        grade: 1
		    },
		    b: {
		        name: "李四",
		        grade: 2
		    }
		}
stu = JSON.stringify(stu);  //将JSON转为字符串存到变量里
console.log(stu);
localStorage.setItem("stu",stu);//将变量存到localStorage里
var newStu = localStorage.getItem("stu");
newStu = JSON.parse(stu); //转为JSON
console.log(newStu); // 打印出原先对象

在这里插入图片描述

localStorage页面传值案例

a页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>localStorage页面传值案例——a页面</title>
		<style>
			.demo{
				color:red;
			}
			.btn{
				border-radius: 10px;
				height:30px;
				width:150px;
				border: 0;
				background-color: mediumpurple;
				color:#fff;
			}
		</style>
	</head>
	<body>
		<h2 class="demo">a页面</h2>
		<div id="a">
			<p style="color: #fff;background:coral;width: 150px;line-height: 60px;text-align: center;">来自a页面</p>
		</div>
		<button class="btn">点击加载新页面</button>
	</body>
	<script src="../js/jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.btn').click(function(){
				var a = $("#a").html();
				// window.open("b.html","_blank");
				window.location.href="b.html";
				localStorage.setItem('name', a);
				
			})
		})
	</script>
</html>

b页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>localStorage页面传值案例——b页面</title>
	</head>
	<body>
		<h2>b页面</h2>
		<div id="b">
		</div>
	</body>
	<script src="../js/jquery.js"></script>
	<script type="text/javascript">
		var str = localStorage.getItem('name');
		$('#b').append(str)
	</script>
</html>

在这里插入图片描述

sessionStorage的使用

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
 
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
 
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
 
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();