webstorage本地存储及localStorage、sessionStorage用法以及session和cookie简单理解及区别

最新推荐文章于 2025-04-29 02:45:00 发布

樱桃小丸犊子吖

最新推荐文章于 2025-04-29 02:45:00 发布

阅读量801

点赞数 1

分类专栏：前端学习总结文章标签： webstorage localStorage session cookie sessionStorage

本文链接：https://blog.youkuaiyun.com/qq_42098849/article/details/104632898

版权

前端同时被 2 个专栏收录

42 篇文章

订阅专栏

学习总结

31 篇文章

订阅专栏

一、webstorage本地存储

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
localStorage生命周期是永久，这意味着除非用户手动在浏览器提清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它也仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
作用域的不同：
- 不同浏览器无法共享localStorage或sessionStorage中的信息
- 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
- 页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的
存储大小：
localStorage和sessionStorage的存储数据大小一般都是：5MB
存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
存储内容类型：
localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
获取方式：
- localStorage：window.localStorage;
- sessionStorage：window.sessionStorage;
- localStorage、sessionStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
应用场景：
- localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，
- sessionStorage：敏感账号一次性登录
WebStorage的优点：
- 存储空间更大：cookie为4KB，而WebStorage是5MB，拓展了cookie的4K限制
- 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量
- 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便
- 快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快
- 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题

参考于：https://blog.youkuaiyun.com/weixin_42614080/article/details/90706499

二、localStorage的用法

1. localStorage的写入

  window.localStorage["a"]=1;
  window.localStorage.b=1;
  window.localStorage.setItem("c",3);

2. localStorage的读取

    //第一种方法读取
    var a=window.localStorage.a;
    //第二种方法读取
    var b=window.localStorage["b"];
    //第三种方法读取
    var c=window.localStorage.getItem("c");

其中官方推荐的是getItem\setItem这两种方法对其进行存取

3. localStorage的修改

思路跟重新更改全局变量的值一样

4. localStorage的删除

将localStorage的所有内容清除： window.localStorage.clear();
将localStorage中的某个键值对删除: window.localStorage.removeItem(‘key’)

5. localStorage的键获取

//遍历本地存储localStorage
for (var i = 0; i < localStorage.length; i++) {
     var key = localStorage.key(i); //获取本地存储的Key
     console.log(key);
     console.log(localStorage.getItem(key));//所有value
     console.log("---------------------------------");
 }

三、sessionStorage的用法

sessionStorage其用法和localStorage差不多

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');
 
// 从sessionStorage获取数据
var data = sessionStorage.getItem('key');
 
// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');
 
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份

服务器和客户端之间进行数据传输，需要使用超文本传输协议即HTTP协议，HTTP协议是无状态的协议，也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。因此为了解决这一问题，即支持客户端与服务器之间的交互，我们就需要通过不同的技术为交互存储状态，引入了Cookie和Session。

四、Cookie

第一次登录后服务器返回一些数据（cookie）给浏览器，浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。

五、Session

session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，而session存储在服务器，并且不是保存在内存中，而是保存在文件或数据库中。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，即会占用服务器的资源。

六、cookie和session结合使用：

存储在服务端：通过cookie存储一个session_id，然后具体的数据则是保存在session中。如果用户已经登录，则服务器会在cookie中保存一个session_id，下次再次请求的时候，会把该session_id携带上来，服务器根据session_id在session库中获取用户的session数据。就能知道该用户到底是谁，以及之前保存的一些状态信息。这种专业术语叫做server side session。
将session数据加密，然后存储在cookie中。这种专业术语叫做client side session。flask采用的就是这种方式，但是也可以替换成其他形式。

参考与：https://www.cnblogs.com/xxtalhr/p/9053906.html

七、session和cookie区别

cookie通过在客户端记录信息确定用户身份，session通过在服务器端记录信息确定用户身份
cookie不是很安全，别人可以分析存放在本地的Cookie并进行Cookie欺骗，考虑到安全应当使用session。
session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用Cookie。
单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
session 的运行依赖 session id，而 session id 是存在 cookie 中的，也就是说，如果浏览器禁用了 cookie ，同时 session 也会失效