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

最新推荐文章于 2024-08-15 20:33:20 发布

胡鹤婷

最新推荐文章于 2024-08-15 20:33:20 发布

阅读量3k

点赞数

分类专栏：存储文章标签：存储

存储专栏收录该内容

2 篇文章 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():清空数据

    <script type="text/javascript">

        //添加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():清空数据

<script type="text/javascript">

        //添加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:在所有同源窗口中都是共享的

补充一个 UserData只有IE浏览器可以使用

IE浏览器可以使用userData来存储数据，容量可达到640k，方案可靠，不需要装额外的插件。
userData行为通过将数据写入一个UserData存储区（UserDatastore）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。
该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。
userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。
userData行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。
实现代码：
<HTML> <HEAD> <STYLE> .userData{behavior:url(#default#userdata);} </STYLE> <SCRIPT> function fnSaveInput(){ var oPersist=oPersistForm.oPersistInput; oPersist.setAttribute("sPersist",oPersist.value);//将oPersist.value存储为sPersist属性 oPersist.save("oXMLBranch"); //存储在名为oXMLBranch的UserData存储区 } function fnLoadInput(){ var oPersist=oPersistForm.oPersistInput; varabc=oPersist.load("oXMLBranch"); //载入在名为oXMLBranch的UserData存储区 oPersist.value=oPersist.getAttribute("sPersist");//将sPersist属性赋值给oPersist.value } </SCRIPT> </HEAD> <BODY> <FORM ID="oPersistForm"> <INPUT CLASS="userData"TYPE="text" ID="oPersistInput"> <INPUT TYPE="button"VALUE="Load" onclick="fnLoadInput()"> <INPUT TYPE="button"VALUE="Save" onclick="fnSaveInput()"> </FORM> </BODY> </HTML>