localStorage sessionStorage学习

柔光的暖阳◎ 2022-07-12 01:17 186阅读 0赞

今天有点不想整理了 ，明天开始~~

哈哈哈，大清早的来整理博客啦

什么是localStorage sessionStorage?这两个是H5新增特性，html5中的Web Storage包括了两种存储方式localStorage sessionStorage,是html5 web storage API提供的，可以方便在web请求之间保存数据，有了本地数据，就可以避免数据在浏览器和服务器间不必要的来回传递

这两个特性在浏览器的哪里呢，先上图看看

![Center][]

好了，现在开始学习吧，说到这个顺带也把cookie一起说上吧

先说应用场景：

cookie属于起源较早的，它比较小，大概只有4KB左右。我们在登录某个网站时候，通常会有记住密码这一选项，这个就是通过cookie中存入一顿辨别用户身份的数据来实现的，服务器根据密码生成了一段暗文，然后返回给用户存储起来，用户以后再登录时候，就会带着这段暗文去服务器端校验，缺点是每次HTTP请求时都会带着cookie，所以说cookie存储的数据越少越好

如果要使用localStorage和sessionStorage，首先要看浏览器是否支持本地存储，本地存储是一个window的属性，所以我们可以先检测浏览器是否支持，检查是否支持可以用window.localStorage||window.sessionStorage来检测

localStorage：是H5标准中新加入的技术，存储方法就是直接给window.localStorage添加一个属性，如

var localStorage=window.localStorage;
    localStorage.first = 3;//设置a为"3"
    localStorage["first"] = "sfsf";//设置first为"sfsf"，覆盖上面的值
    localStorage.setItem("second","hahha");//设置second为"hahha"
    var a1 = localStorage["first"];//获取first的值
    var a2 = localStorage.first;//获取first的值
    var b = localStorage.getItem("second");//获取second的值
    localStorage.removeItem("second");//清除c的值

显示结果如下：

![Center 1][]

sessionStorage用法与其类似，这里就不再赘述了，注意，storage只能存储字符串，至于其他的类似对象或者json串需要做下转换即可

var obj = { name:'Jim' }; 
    var str = JSON.stringify(obj); 
    
    //存入 
    sessionStorage.obj = str; 
    //读取 
    str = sessionStorage.obj; 
    //重新转换为对象 
    obj = JSON.parse(str);

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。

webStorage带来的好处：

1、在用户断网的情况下，可以从storage中获取信息，这对于尤其是在航空旅行中的用户来说很有帮助

2、减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间的来回传递

3、快速显示数据：性能好，从本地读取数据比通过网络从服务器获取数据快的多，本地数据可以及时获得，在加上整个页面和数据都在本地的话，可以立即显示

４、临时存储：很多数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢失了，这种情况sessionstorage很方便

\------------------------------------------------------------------------------------------------------------

好了，大概就写这些了，下面这些从别处博客看到的觉得不错，所以就拷贝来了

**浏览器本地存储与服务器端存储之间的区别**

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

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

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

1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。

2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。

浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。

服务器存储数据安全一些，浏览器只适合存储一般数据。

**sessionStorage 、localStorage 和 cookie 之间的区别**

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

区别：

1.  cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2.  存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.  数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.  作用域不同，sessionStorage**不在**不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5.  Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6.  Web Storage 的 api 接口使用更方便。

**sessionStorage与页面 js 数据对象的区别**

页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。

而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。

[Center]: /images/20220711/5ff2400a85f749c5895c097bb8db1f0c.png
[Center 1]: /images/20220711/c93ef35cfde44b3e87c426cdc4db9f7e.png