专题 | cookie localStorage 和sessionStorage

快乐的高兴的学习代码中

已于 2022-09-23 22:37:35 修改

阅读量187

点赞数

分类专栏：详细知识文章标签：前端 cookie

于 2022-09-20 14:26:03 首次发布

本文链接：https://blog.csdn.net/a123pplequeen/article/details/126951232

版权

详细知识专栏收录该内容

45 篇文章 2 订阅

订阅专栏

补充：超级重要一点

看cookie存储在哪，是f12后的Application--cookies

cookie

cookie是一种存储机制

当我们第一次请求网页内容的时候是没有任何cookie的，服务器在收到请求后会在http响应里添加头部Set-Cookie,并在set-Cookie里进行标识，在下一次请求的时候浏览器就会在http请求里添加头部Cookie,并且用上set-Cookie里的标识。

服务器给set-Cookie后，以后每一次http请求都要把cookie数据传送给服务器，如果每一次都把含有大量数据的Cookie发送给服务器，服务器就会崩溃，因此Cookie设计的很小，不超过4kb

localStroage与sessionStroage

随着html5的出现，有了web存储，就有了localStroage与sessionStroage。

当用户第一次请求服务器的时候，服务器响应内容，并附加可操控网页的js,当用户操作进行个人设置的时候，这些个人设置就可以通过web存储机制保护在浏览器里

localStroage会永远保存在浏览器里，可以自行删除，被保存下来，但它不参与服务器通信，localStroage是同步的机制，会影响浏览器的渲染进度

sessionStroage会保存在浏览器里，关闭窗口就会被删除

案列：localStroage的例子

还有那个绿色圆圈应该是个X号，css效果可以在进一步修改一下！

sessionStroage的例子代码写法与这个一样，把localStroage单词改成sessionStroage就行了，那个例子之后再说吧！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		input{
			margin: 0;
		}
		section{
			width: 300px;
			height:300px;
			background-color: skyblue;
		}
		ul{
			list-style:none;
		}
		span{
			width: 30px;
			height: 30px;
			background-color: green;
			display: block;
			border-radius: 50%;
		}
	</style>
	<body>
		<input type="text"><button>搜索</button>
		<section><ul class="history"></ul></section>
		<!-- <span>11</span> -->
		<button id="btn">吃瓜</button>
		<script>
			const input=document.querySelector('input[type="text"]');
			const button=document.querySelector("button");
			const history=document.querySelector('.history');
			const btns=document.getElementById("btn");
			
			// 防止每次页面刷新页面上的就不见了，也就是新打开的页面数据和之前的页面一致
			if(localStorage.length>0){
				for(let i=0;i<localStorage.length;i++){
					let key=localStorage.key(i);
					let li=document.createElement('li');
					let liText=document.createTextNode(localStorage.getItem(key));
					li.appendChild(liText);
					history.appendChild(li);
					let close=document.createElement('span');
					li.append(close);
					close.addEventListener('click',()=>{
						localStorage.removeItem(key);
						li.parentNode.removeChild(li);
					});
				}
			}
			
			// 把输入的数据添加到下面的蓝色框中
			button.addEventListener('click',()=>{
				if(input.value){
					let key=new Date().valueOf();
					let value=input.value;
					localStorage.setItem(key,value);
					input.value="";
					
					// 把名值对显示在历史记录里面
					let li =document.createElement('li');
					let liText=document.createTextNode(localStorage.getItem(key));
					li.appendChild(liText);
					history.appendChild(li);
					
					// 把添加的内容进行删除
					let close=document.createElement('span');
					li.append(close);
					close.addEventListener('click',()=>{
						localStorage.removeItem(key);
						li.parentNode.removeChild(li);
					})
				}
			})
		</script>
	</body>
</html>

cookie与localStorage与sessionStorage的比较

	cookie	localStroage	sessionStroage
大小	4kb	10mb	5mb
兼容	h4/h5	h5	h5
访问	任何窗口	任何窗口	同一个窗口
有效期	手动设置	无	到窗口关闭
存储位置	浏览器和服务器	浏览器	浏览器
与请求一起发送	是	否	否
语法	复制 document.cookie	简易	简易