Web Storage 存储

最新推荐文章于 2024-08-21 09:05:46 发布

想被带飞的鱼

最新推荐文章于 2024-08-21 09:05:46 发布

阅读量1.6k

点赞数

分类专栏： Javascript 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/m0_62008199/article/details/123502833

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

Web Storage 存储

1.cookie

概念：Cookie 是 HTML 4 中在客户端存储简单用户信息的一种方式，它使用文本来存储信息，当有应用程序使用 Cookie 时，服务器端就会发送 Cookie 到客户端，客户端浏览器将会保存该 Cookie 信息。下一次页面请求时，客户端浏览器就会把 Cookie 发送到服务器。

1.首先要看得到cookie要在vscode里面下载一个插件live Server,右键从Open with live Server打开页面，此时若地址栏前面显示http://127.0.0.1:5500/则为成功。(在浏览器里面查看自己设置的cookie，F12–>Application—>cookie)

2.创建cookie

document.cookie="username=John Doe";

3.为cookie添加一个过期时间（以UTC或GMT时间）

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

4.使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

  <input type="button" value="设置cookie" id="setCookie">
    <input type="button" value="获取cookie" id="getCookie">
    <script>
        document.getElementById("setCookie").onclick = function(){
            document.cookie = "a=1";
        }
        document.getElementById("getCookie").onclick = function(){
            console.log("document.cookie",document.cookie);
        }
    </script>

【优点】

简单易用
浏览器负责发送数据
浏览器自动管理不同站点的cookie
自动完成和浏览器之间的交互

【缺点】

安全性差
4kb大小限制
存储数量有上限，30或50个
浏览器安全级别最高会导致cookie失效
存储数据过大会导致传输效率降低

2.localStorage

永久存储
localStorage 是一种没有时间限制的数据存储方式，可以将数据保存在客户端的硬盘或其他存储器，存储时间可以是一天，两天，几周或几年。浏览器的关闭并不意味着数据也会随之消失。当再次打开浏览器时，我们依然可以访问这些数据。localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

3.sessionStorage

会话：关闭浏览器和打开浏览器算一次
sessionStorage 指的是针对一个 session 的数据存储，即将数据保存在 session 对象中。Web 中的 session 指的是用户在浏览某个网站时，从进入网站到关闭浏览器所经过的这段时间，可以称为用户和浏览器进行交互的"会话时间"。session 对象用来保存这个时间段内所有要保存的数据。当用户关闭浏览器后，这些数据会被删除。

<!--只能存储一次数据-->
<body>
    <input type="button" value="设置sessionStorage" id="setStorage">
    <input type="button" value="获取sessionStorage" id="getStorage">

    <script>
        document.getElementById("setStorage").onclick = function(){
            sessionStorage.setItem("a",100);
            //存入对象的时候，要将对象转换成字符串，不然存不进去
            sessionStorage.setItem("student",JSON.stringify({name:"张三",age:23}));
        }
        document.getElementById("getStorage").onclick = function(){
            console.log(sessionStorage.getItem("a"));
            let student = JSON.parse(sessionStorage.getItem("student"));
            //获取的字符串，要将姓名获取就要先把字符串转换成JSON对象
            console.log("stedent:",typeof student,student.name);

        }
    </script>
</body>