浏览器的本地存储与服务器端存储

ゝ一世哀愁。 2022-05-16 11:45 179阅读 0赞

### 数据既可以在浏览器本地存储，也可以在服务器端存储 ###

浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage,localStorage和cookie都是由浏览器存储在本地的数据

服务器端也可以保存所有用户的数据，但需要的时候浏览器要向服务器请求数据

1.服务器端可以保存用户的持久性数据，如数据库和云存储将用户大量数据保存在服务器端  
2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp中的session对象,数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置session有效日期。  
服务器端保存所有用户的数据，所以服务器的开销比较大，而浏览器保存则把不同用户需要的数据分布保存在用户各自的浏览器中。  
浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据  
服务器存储数据安全一些 ，浏览器值适合存储一般数据

### 详述浏览器本地存储 ###

cookie,sessionStorage和localStorage

sessionStorage和localStorage的诞生背景

在Html4时代，对Cookie的大小，格式，存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息，一般只能借助存Cookie，但是大多数浏览器对于Cookie的限制也就逼迫网站存储数据尽量精简，想存储复杂的，关系型的用户数据根本不可能。 Cookie的限制： 1. 大多数浏览器支持最大为4096字节的Cookie 2. 浏览器还限制站点可以在用户计算机上存储的Cookie的数量。大多数浏览器只允许每个站点存储20个Cookie 3. 有些浏览器还会对它们将接受的来自所有站点的Cookie总数做出绝对能限制，通常为300个 4. Cookie默认情况都会随着Http请求发送到后台服务器，但并不是所有的请求都需要Cookie，比如:js,css,图片等的请求不需要Cookie Html5的设计者们，为了破解Cookie的一些列限制，HTML5通过JS的新的API就能直接存储大量数据到客户端的浏览器上，而且支持复杂的本地数据库。Html5支持的两种WebStorage，一种是永久性的本地存储（localStorage）,另外一种是会话级别的本地存储（sessionStorage）

**会话级别的本地存储：**sessionStorage

在html5中增加了一个JS对象：sessionStorage;通过此对象可以直接操作存储在浏览器中会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，另外就是他跟浏览器当前会话相关，当前会话结束后，数据就会自动清除，跟未设置过期时间的Cookie相似  
sessionStorage提供了四个方法来辅助我们对本地存储做相关操作：  
(1)setltem(key,value):添加本地存储数据  
(2)getltem(key):通过key获取相应的value  
(3)remove(key):通过key删除本地数据  
(4)clear():清空数据

//添加key-value数据到sessionStorage,通过sessionStorage调用setItem这个方法

sessionStorage.setItem("demokey","Hello World");

//通过key来获取value

var dt = sessionStorage.getItem("demokey"); alert(dt);

//清空所有的key-value数据

// sessionStorage.clear();

alert(sessionStorage.length);

</script>

**永久本地存储**：localStorage

在最新的JS的API中增加了localStorage对象，以便用户存储永久存储的web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑。因为在HTML5的标准中，要求浏览器至少要支持到4MB。所以，这完全颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。  
localStorage提供了四个方法来辅助我们进行本地存储的相关操作：  
(1)setltem(key,value):添加本地存储数据  
(2)getltem(key):通过key获取相应的value值  
(3)removeltem(key):通过key删除本地数据  
(4)clear():清空数据

//添加key-value数据到loacalStorage,通过localStorage调用setItem这个方法

localStorage.setItem("demokey","Hello World");

//通过key来获取

value var dt = localStorage.getItem("demokey"); alert(dt);

//清空所有的key-value数据

// localStorage.clear();

alert(localStorage.length);

</script>

刷新浏览器，数据依然存在

**总结Cookie,localStorage,sessionStorage的区别**

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

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie数据还有路径的概念(path)的概念，可以限制cookie只属于某个路径下。

**1. 存储大小区别：**   
cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比Cookie大的多，可以达到5M甚至更大  
**2. 数据有效 期限：**   
sessionStorage：仅在当前浏览器窗口关闭前有效，不可能持久保持  
localStorage:始终有效，窗口或者浏览器关闭也一直保存，因此用作持久数据  
Cookie:只在设置的过期时间之前一直有效，即使窗口或者浏览器关闭  
**3. 作用域：**  
sessionStorange在不同的浏览器窗口共享 ，即使是同一个页面  
localStorage:在所有同源的窗口中都是共享的  
Cookie:在所有同源窗口中都是共享的