cookie、本地存储（localStorage、sessionStorage）用法、设置、查看位置及区别

HTML5之前的存储：cookie设置cookie：<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>cookie的应用——记住用户名</title></head><body><form action="#"

DOM曼珠沙华

4176人浏览 · 2020-05-24 04:02:48

DOM曼珠沙华 · 2020-05-24 04:02:48 发布

HTML5之前的存储：cookie

设置cookie：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  	<meta charset="UTF-8">
  	<title>cookie的应用——记住用户名</title>
</head>
<body>
	<form action="#" id="myform">
		<label for="username">用户名：</label><input type="text" name="username" id="username" />
		<label for="userpass">密码：</label><input type="password" name="userpass" id="userpass" />
		<input type="submit" value="登录" />
		<a href="javascript:;">清除记录</a><br>	
		<span id="span1"></span>
	</form>
  	<script>
  		window.onload = function(){
  			function setCookie(name,value,hours){
			 var d = new Date();
			 d.setTime(d.getTime() + hours * 3600 * 1000);
			 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
			 console.log("cookie",document.cookie);
			}
			function getCookie(name){
			 var arr = document.cookie.split('; ');
			 for(var i = 0; i < arr.length; i++){
			  var temp = arr[i].split('=');
			  if(temp[0] == name){
			   return temp[1];
			  }
			 }
			 return '';
			}
			function removeCookie(name){
			 var d = new Date();
			 d.setTime(d.getTime() - 10000);
			 document.cookie = name + '=1; expires=' + d.toGMTString();
			}
				var mm = new Date();
				var oSpan = document.getElementById("span1");
				oSpan.innerHTML = mm;
			  var oForm = document.getElementById('myform');
			  var oTxt1 = document.getElementById('username');
			  var oTxt2 = document.getElementById('userpass');
			  var oClear = document.getElementsByTagName('a')[0];
			  oTxt1.value = getCookie('username');
			  oTxt2.value = getCookie('userpass');
			  oForm.onsubmit = function(){
			    setCookie('username',oTxt1.value,30);
			    setCookie('userpass',oTxt2.value,30);
			  }
			  oClear.onclick = function(){
			    removeCookie('username');
			    removeCookie('userpass');
			    oTxt1.value = '';
			    oTxt2.value = '';
			  }
			}
  	</script>
</body>
</html>

上述代码包含设置、读取、清除cookie。

运行后：

在谷歌上检查设置的cookie，发现设置是正常的。检查方法可以看这篇文档。

同时，这里也设置了时长：

cookie存储永久数据存在这几个问题：

大小：cookie的大小被限制在4KB。

带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。

复杂性：要正确的操作cookie是很困难的。

Web Storage

实现数据存储的实例：

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>webStorage示例</title>
	</head>
	<body>
		<h1>webStorage示例</h1>
		<p id="msg"></p>
		<input type="text" id="input" />
		<input type="button" value="保存数据" onClick="saveStorage('input');"/>
		<input type="button" value="读取数据" onClick="loadStorage('msg');"/>
	</body>
</html>

HTML5之后的存储：sessionStorage

将数据保存到session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间，session对象可以用来保存在这段时间内所要求保存的任何数据。

sessionStorage.setItem('key','value');
//或
sessionStorage.key = 'value';
 
//读取数据的方法
变量 = sessionStorage.getItem('key');
//或
变量 = sessionStorage.key;

在使用sessionStoage存储数据时，

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
	//或sessionStorage.message = str;
	console.log(sessionStorage);
}
function loadStorage(id){
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	// 或 var msg = sessionStorage.message;
	target.innerHTML = msg;
}

存储的结果：

HTML5之后的存储：localStorage

设置

将数据保存到客户端本地的硬件设备（硬盘或其他）中，即使浏览器被关闭，该数据仍然存在，下次打开浏览器访问网站仍然可以继续访问。

localStorage.setItem('key','value');
//或
localStorage.key = 'value';
 
//读取数据的方法
变量 = localStorage.getItem('key');
//或
变量 = localStorage.key;

在使用localStorage存储数据时：

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
	//localStorage.message = str;
	console.log(localStorage);
}
function loadStorage(id){
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	// 或 var msg = localStorage.message;
	target.innerHTML = msg;
}

与sessionStorage存储位置一致。

在浏览器查看，打开调试工具(F12)，在application选项卡下可以查看。

localStorage作为客户端浏览器持久化存储方案

存储位置

这个是浏览器隔离的，每个浏览器都会把localStorage存储在自己的UserData中，如chrome一般就是

C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

下的文件003140.log 看到存储的数据 testtest：

区别

localStorage和sessionStorage的相同点：

共同方法key、setItem、getItem、removeItem、clear()等方法。
都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象
存储大小都为5M
都遵守同源策略

下图是在浏览器内sessionStorage对象内的方法：

不同点：

sessionStorage为临时保存，浏览器关闭则失效，localStorage为永久保存。
localStorage 在同源的不同窗口下可共享，在不同浏览器中不可共享
sessionStorage 在同源的不同窗口下不可共享。注意这里的不同窗口是指浏览器另起一窗口，并不是指页面路由跳转

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..