在PHP和JavaScript中设置Cookie会话存储（SessionStorage）和本地存储（LocalStorage）

Posted 2023-02-22 许硕的博客

A. Cookie介绍

Cookie：

Cookie常用于识别用户，它是服务器留在用户计算机中的小文件（大小限制在4KB），每当相同的计算机通过浏览器请求页面时，它会同时发送Cookie，即Cookie是随HTTP事务一起被发送的，因此会浪费一部分发送Cookie时使用的带宽。

与会话存储和本地存储较为不同的一点是，无论您需不需要在Cookie存储的数据，它都会在页面响应时于浏览器与服务器中相互传送。

B. 会话存储介绍

会话存储（SessionStorage）：

会话存储常用于临时保存窗口或标签页的数据。会话存储在同源的不同窗口下不可共享，但是与window.open()方法打开的窗口共享一个会话存储（SessionStorage），即您如果关闭页面窗口或在浏览器中创建新窗口，会话存储将失效，而不是指页面路由跳转。

与Cookie不同的一点是，会话存储只会在需要的时候调用获取，并不会主动发送。

C. 本地存储介绍

本地存储（LocalStorage）：

本地存储常用于需要长时间保存的数据。本地存储数据在理论上会永久保存，除非用户或服务器删除此数据。本地存储在同源的不同窗口下可共享，在不同浏览器中不可共享。

与Cookie不同的一点是，本地存储只会在需要的时候调用获取，并不会主动发送。

1. 在 PHP 中设置 Cookie

使用规范

在PHP中设置Cookie信息常使用setcookie函数，cookie函数。

接收时会进行URL解码。如果你不需要这样，可以使用setrawcookie函数代替。

需要注意的是，Cookie必须在其他信息发送前赋值，即应把Cookie赋值代码段放在其他代码段的前面。

新建Cookie

<?php
 
// setcookie函数
setcookie(name,value,expire,path,domain,secure);
 
// setrawcookie函数
setrawcookie(name,value,expire,path,domain,secure);
 
// 其他PHP或HTML代码
 
?>

setcookie函数与setrawcookie函数参数解释

参数名称	参数选项	参数解释
name	必选	名称
value	必选	值
expire	可选	有效期
path	可选	服务器路径
domain	可选	作用域名
secure	可选	连接方式（是否以安全HTTPS连接）

setcookie函数与setrawcookie函数返回值解释

返回值	返回类型	返回值解释
true	bool	设置成功
false	bool	设置失败

新建、删除Cookie示范

<?php
 
// time函数会返回当前时间的时间戳，即自Unix纪元（标准时间1970年1月1日0点，北京时间标准时间1970年1月1日8点）起至当前时间的秒数
 
// 设置一个名称为name且值为value的Cookie，此Cookie直到浏览器标签页或窗口关闭后失效
setcookie(\'name\',\'value\');
 
// 设置一个名称为name且值为value的Cookie，此Cookie直到24小时关闭后失效
setcookie(\'name\',\'value\',time()+60*60*24);
 
// 设置一个名称为name且值为value的Cookie，此Cookie直到24小时关闭前失效
// 值得说明的是，由于官方没有提供立即删除Cookie的方法，所以开发者们常用这种方法来立即删除Cookie
setcookie(\'name\',\'value\',time()-60*60*24);
 
// 变量操作，将一个名称为name且的Cookie的值变更为value，
$_COOKIE[\'name\'] = \'value\'
 
?>

获取Cookie

<?php
 
// 第一种方法
$HTTP_COOKIE_VARS["name"]
 
// 第二种方法（推荐）
$_COOKIE["name"]
 
// 例如，以下代码把Cookie name的值赋值给了变量var
$var = $_COOKIE["name"];
 
?>

2. 在 PHP 中设置 会话存储

使用规范

在PHP中设置会话存储，应以session_start函数开始——值得注意的是，此函数必须在其他信息发送前调用，即应把其代码段放在其他代码段的前面，如以下示范：

<?php
 
session_start();
 
// 其他PHP或HTML代码
 
?>

设置会话存储

随后，我们可以用变量操作的方式来设置会话存储，如以下示范：

<?php
 
session_start();
 
// 将一个名为name的会话存储设置为value
$_SESSION[\'name\'] = \'value\';
 
// 将一个名为number的会话存储设置为0
$_SESSION[\'number\'] = 0;
 
// 其他PHP或HTML代码
 
?>

获取会话存储

我们可以用以下方式获取会话存储或将会话存储数值赋值到变量中。

<?php
 
// 获取名为name的本地存储
$_SESSION[\'name\']
 
 
// 将名为name的本地存储赋值给变量var
$var = $_SESSION[\'name\']
 
?>

3. 在 PHP 中设置 本地存储

目前仍未找到有效的PHP设置本地存储的方法，可以使用以下方法来借助JavaScript实现。

具体JavaScript实现步骤请查看【6. 在 JavaScript 中设置 本地存储】。

<?php
 
echo \'<script type="text/javascript"> 【JavaScript代码】 </script>\'
 
?>

4. 在 JavaScript 中设置 Cookie

使用规范

在此处提醒，如您准备将JavaScript代码嵌入到HTML文件中，您需要以如下格式来嵌入JavaScript代码，而如果您将JavaScript代码写入到.JS格式文件中，则不需要此格式。本篇博客展示的JavaScript代码默认在.JS文件下编辑。（以后将不再提醒）

<!-- 将JavaScript代码嵌入到.HTML文件 -->
 
<script type="text/javascript">
    // 如果您的浏览器等支持默认<script>标签，
    // 则您可将“ type="text/javascript" ”此句去除
    【JavaScript代码】
</script>

// .JS文件
 
【JavaScript代码】

新建、获取Cookie

在此提供两个快捷函数，您可以直接使用。原始标准方式如下第一、二行，具体值可参考函数参数或【1. 在 PHP 中设置 Cookie - 新建Cookie】的相关函数辅助理解。

// 标准设置格式，带【】的为需更改值
document.cookie="【name】=【value】; expires=【time】; path=【】";
 
// 设置Cookie函数
function setCookie(name,value,time)
	var d = new Date();
	d.setTime(d.getTime() + (time*1000));
	var expires = "expires=" + d.toGMTString();
	document.cookie = name + "=" + value + "; " + expires;

 
// 获取Cookie函数
function getCookie(name)
	var name = name + "=";
	var ca = document.cookie.split(\';\');
	for(var i=0; i<ca.length; i++) 
		var c = ca[i].trim();
		if (c.indexOf(name)==0) 
            return c.substring(name.length, c.length);
            
	
	return "";

 
 
//document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

setCookie函数参数解释

参数名称	参数选项	参数解释
name	必选	名称
value	必选	值
time	必选	有效期

（setCookie函数没有返回值。）

getCookie函数参数解释

参数名称	参数选项	参数解释
name	必选	要查询的Cookie名称

getCookie函数返回值解释

返回值	返回类型	解释
""	string	表示Cookie值查询失败或没有此Cookie
【具体值】	string	表示Cookie值查询成功，返回具体Cookie值

新建、删除Cookie示范

如PHP，新建Cookie和删除Cookie与PHP相关操作相差不多，删除Cookie即将Cookie作用时间提前——如下：

// 新建Cookie
document.cookie = "name=value1; expires=Sun, 31 Dec 2025 12:00:00 UTC; path=/";
 
// 覆盖Cookie
document.cookie = "name=value2; expires=Sun, 31 Dec 2025 12:00:00 UTC; path=/";
 
// 删除Cookie
document.cookie = "name=value1; expires=Sun, 31 Dec 2022 12:00:00 UTC; path=/";
获取Cookie
// 基本语句
getCookie(); // 参数：Cookie名称
 
// 实际应用
getCookie("name");
 
// 变量赋值
var name = getCookie("name");
let name = getCookie("name");

5. 在 JavaScript 中设置 会话存储

使用规范

在JavaScrpit中，设置会话存储和设置本地存储的API是相同的。仅需将会话存储sessionStorage和本地存储localStorage部分相互转换即可。

查看是否支持会话存储

if (！window.sessionStorage) 
    // ! window.sessionStorage返回true值，不支持sessionStorage
    console.log("浏览器不支持sessionStorage"); 
 else 
    // ! window.sessionStorage返回false值，支持sessionStorage

新建、删除、获取会话存储

JavaScript有关会话存储的方法
类别	方法
新建	sessionStorage.setItem("name", "value");
新建	sessionStorage.name = "value";
新建	sessionStorage["name"] = "value";
获取	sessionStorage.getItem("name");
获取	sessionStorage.name;
获取	sessionStorage["name"];
删除	sessionStorage.removeItem(name); // 删除单个数据
删除	sessionStorage.clear(); // 清除所有数据

6. 在 JavaScript 中设置 本地存储

使用规范

在JavaScrpit中，设置会话存储和设置本地存储的API是相同的。仅需将会话存储sessionStorage和本地存储localStorage部分相互转换即可。

查看是否支持本地存储

if (！window.localStorage) 
    // ! window.localStorage返回true值，不支持localStorage
    console.log("浏览器不支持localStorage"); 
 else 
    // ! window.localStorage返回false值，支持localStorage

新建、删除、获取本地存储

参考【5. 在 JavaScript 中设置 会话存储 - 新建、删除、获取会话存储】。