localStorage和sessionStorage区别

最新推荐文章于 2022-12-26 11:15:51 发布

不会打字314

最新推荐文章于 2022-12-26 11:15:51 发布

阅读量203

点赞数

分类专栏： javaweb 前端文章标签： java session cookie

本文链接：https://blog.csdn.net/shaoming314/article/details/110819786

版权

前端同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

javaweb

8 篇文章 0 订阅

订阅专栏

LocalStorage和SessionStorage区别

前言

会话技术之前只是知道cookie和session,不知道前端还有LocalStorage和SessionStorage,这次正好整理一下,顺便进一步加深理解

面试题

localStorage和sessionStorage区别

cookie、sessionStorage和localStorage的区别

参考网址:

https://blog.csdn.net/weixin_42614080/article/details/90706499?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160730290119195265176557%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160730290119195265176557&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-4-90706499.first_rank_v2_pc_rank_v29&utm_term=localstorage%E5%92%8Csessionstorage%E7%9A%84%E5%8C%BA%E5%88%AB&spm=1018.2118.3001.4449

https://blog.csdn.net/qq_31741481/article/details/88054069?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160730290119195265176557%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160730290119195265176557&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-2-88054069.first_rank_v2_pc_rank_v29&utm_term=localstorage%E5%92%8Csessionstorage%E7%9A%84%E5%8C%BA%E5%88%AB&spm=1018.2118.3001.4449

cookie
1）HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储
2）cookie的构成：
名称：name(不区分大小写,但最好认为它是区分的)
值:value(通过URL编码:encodeURIComponent)
域
路径
失效时间:一般默认是浏览器关闭失效,可以自己设置失效时间
安全标志:设置安全标志后只有SSL连接的时候才发送到服务器
3）cookie的作用:主要用于保存登录信息
4）生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
5）cookie的优点：具有极高的扩展性和可用性
通过良好的编程，控制保存在cookie中的session对象的大小
通过加密和安全传输技术，减少cookie被破解的可能性
只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失
控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie
6）cookie的缺点：
cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉
安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用
有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用

sessionStorage
1）sessionStorage是Storage类型的一个对象，拥有clear(),getItem(name),key(index),removeItem(name),setItem(name,value)方法
2）sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭
3）将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据
4）sessionStorage为临时保存

localStorage
1）localStorage也是Storage类型的一个对象
2）在HTML5中localStorage作为持久保存在客户端数据的方案取代了globalStorage(globalStorage必须指定域名)
3）localStorage会永久存储会话数据，除非removeItem,否则会话数据一直存在
4）将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用
5）localStorage为永久保存

证明

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

测试html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试LocalStorage和SessionStorage的区别</title>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1 style="color: red">
    <button id="btn1">存放数据到LocalStorage(username:root,password:root)</button>
    <hr>
    <button id="btn2">获取数据LocalStorage(username:root,password:root)</button>
    <hr>
    <button id="btn5">清楚数据LocalStorage(username:root,password:root)</button>
    <hr>
    <hr>
    <hr>
    <button id="btn3">存数据到SessionStorage(username:admin,password:admin)</button>
    <hr>
    <button id="btn4">获取SessionStorage(username:admin,password:admin)</button>
    <hr>
    <script>
        var userInfo = {username:"root",password:"root"};
        var user = {username:"admin",password:"admin"};
        /**
         * 存放数据到LocalStorage
         */
        $("#btn1").click(function () {
        var userInfoToJson = JSON.stringify(userInfo);
        localStorage.setItem("userInfo",userInfoToJson);
        });
        /**
         * 从LocalStorage中获取数据
         */
        $("#btn2").click(function () {
            var item = localStorage.getItem("userInfo");
            alert(item);
            console.log(item);
        });
        /**
         * 从LocalStorage中清除数据
         */
        $("#btn5").click(function () {
            localStorage.removeItem("userInfo");
        });

        /**
         * 存数据到SessionStorage
         */
        $("#btn3").click(function () {
            var userToJson=JSON.stringify(user);
            sessionStorage.setItem("user",userToJson);
        });
        /**
         * 从SessionStorage中获取数据
         */
        $("#btn4").click(function () {
            var itemuser = sessionStorage.getItem("user");
            alert(itemuser);
            console.log(itemuser);
        });
    </script>

</h1>
</body>
</html>

测试说明

1.LocalStorage

1.1设置和获取LocalStorage中的数据

退出浏览器重新获取,依旧可以获取LocalStorage中的数据

1.2 清除后获取LocalStorage中的数据

结论:

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

2.SessionStorage

2.1 设置获取SessionStorage中的数据

退出浏览器重新获取SessionStorage中的数据

结论:

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

个人csdn博客网址:https://blog.csdn.net/shaoming314

PH2-1607326124779)]

结论:

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

个人csdn博客网址:https://blog.csdn.net/shaoming314

不会打字314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
localStorage和sessionStorage区别

LocalStorage和SessionStorage区别前言会话技术之前只是知道cookie和session,不知道前端还有LocalStorage和SessionStorage,这次正好整理一下,顺便进一步加深理解面试题localStorage和sessionStorage区别cookie、sessionStorage和localStorage的区别参考网址:https://blog.csdn.net/weixin_42614080/article/details/90706499?
复制链接

扫一扫

专栏目录