get，post，cookie，session，localStorage，sessionStorage等数据传输和缓存技术

最新推荐文章于 2024-12-06 19:56:28 发布

原创最新推荐文章于 2024-12-06 19:56:28 发布 · 782 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #session #cookie #缓存 #webStorage

JavaScript 专栏收录该内容

67 篇文章

订阅专栏

本文详细介绍了前端存储技术如cookie、localStorage、sessionStorage的区别及其应用场景，并对比了GET与POST请求的特点。

首先，从存储的位置来看，可以这么划分：

1. 服务端缓存：session

2. 浏览器端缓存：cookie，localStorage，sessionStorage

其中，cookie也可以在服务端进行操作

1. cookie

cookie的存放有一定的生命周期，若不设置，在关闭浏览器窗口后cookie就会自动消失。

（1）使用JavaScript设置cookie

document.cookie="username=John";

为cookie设置生命周期：

document.cookie="username=John; expires=Thu, 18 Oct 2017 12:00:00/GWT";

读取cookie，document.cookie会以字符串的方式返回所有的cookie，每个cookie之间用；连接

document.cookie="username=John";
document.cookie="age=18";
var coo=document.cookie;
var cookie1=coo.split(";")[0]//username=John
var username=cookie.split("=")[1]; John

修改cookie

document.cookie="username=Bob";

删除cookie，只需把时间设置在以前即可，且删除时不必指定cookie的值

document.cookie="username=;expires=Thu, 18 Oct 1997 12:00:00/GWT"

（2）PHP设置cookie

setcookie("user","John",time()+3600);//1小时后失效
setcookie("user","Bob",time()+3600);//修改
setcookie("user","John",time()-3600);//删除cookie

cookie一般不存储在硬盘上，而是保存在内存中。若设置了过期时间，浏览器会把cookie保存在硬盘上，浏览器关闭后再次打开，cookie依然有效。存储在硬盘上的cookie可以在不同的浏览器进程中共享。由于cookie存储在客户端，如果cookie被窃取，会造成安全性问题。另外，由于每次客户端向服务器发送请求的时候都会带上cookie，所以会增加每次http请求的传输量。因此，提出了cookie隔离的概念。

cookie隔离：

把js，css和图片等静态资源放在非主域名下面。这样在请求这些资源的时候就不会带上主域名的cookie，从而起到了优化的作用。

2. session

每个session都有一个sessionId，且客户端发起请求的时候都会带上sessionId，如果没有sessionId，服务端就会新建一个然后再返回给客户端。

PHP设置session

$_SESSION["username"]="John";//设置username，若没有则自动创建新的id

unset($_SESSION["username"]);//删除该session值

与cookie相比，session更安全，但是一旦访问量增多，会比较占用服务器的性能。session保存是对象，cookie保存的是字符串。session不设置路径，而cookie一旦设置路径，则不同网站无法互通。

建议登录信息等重要信息存放在session中，其他信息保留在cookie中。

session的存储量取决于服务器本身的性能。受内存大小限制。

3. localStorage

localStorage是html5提出，localStorage设置后除非被清除，否则永久保存
设置

localStorage.name="John";
localStorage["name"]="John";
localStorage.setItem("name","John");

获取

var name=localStorage.name;
var name=localStorage["name"];
var name=localStorage.getItem["name"];

删除

localStorage.removeItem("name");
localStorage.clear();//删除所有的

4. sessionStorage

操作方法同localStorage，关闭浏览器，则数据自动删除

cookie、localStorage和sessionStorage之间的区别

共同点：保存在浏览器端，且同源

区别：

（1）通信：cookie数据在同源的http请求中携带，即为客户端与服务器端的通信；而web storage不会把数据发送到服务端，仅在本地保存；

（2）路径：cookie可以设置path路径

（3）数据量：cookie数据不能超过4k（4096B），一般最多设置20个；web storage的存储量一般为5MB；

（4）生命周期：cookie只在生命周期能有效；sessionStorage在关闭浏览器后失效；localStorage除非手动删除，否则永久有效；

（5）作用域：cookie可以在所有同源窗口中共享；sessionStorage不在不同的浏览器窗口中共享（毕竟只是针对浏览器的）；localStorage在所有同源窗口中共享

（6）web storage支持时间通知机制，可以将数据更新通知发送给监听者。

（7）web storage的API接口更方便。

5. GET请求和POST请求的比较

（1）缓存：get可以被缓存，post不行；

（2）安全性：get安全性差，在url中可以，不应在处理敏感信息时使用。post请求比较安全，在url中不可见；

（3）数据量：get方法发送url请求时，url的最大长度为2048个字符，而post没有长度限制；

（4）数据类型：get只允许ASCII字符，post没有限制，也可以传输二进制数据
（5）后退按钮/刷新：get无影响，若为post，数据会被重新提交（浏览器应该告知用户数据会被重新提交）