缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用

最新推荐文章于 2022-09-02 09:57:48 发布

梦想称为大佬

最新推荐文章于 2022-09-02 09:57:48 发布

阅读量242

点赞数

分类专栏： HTMLcss 文章标签： javascript java session js

本文链接：https://blog.csdn.net/xawjz/article/details/117373003

版权

HTMLcss 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5中的三种缓存技术——cookie、localStorage和sessionStorage，包括它们的生命周期、大小限制、与服务器通信方式和使用场景。通过实例演示了如何在实际项目中操作和维护这些存储方式。

摘要由CSDN通过智能技术生成

三种缓存方案coolKie、localStorage、sessionStorage

cookie

cookie是小甜饼的意思，顾名思义，cookie确实非常小，他的大小限制在4KB左右。

他的主要用途有保存登录信息，比如你登录某个网站市场可以看到记住密码，这通常是通过在cookie中存入一段边界用户身份的数据来实现的。

localStorage

localStorage是HTML5标准中新加入的技术，他并不是什么划时代的新东西，早在IE6就有一个叫userData的东西用于本地存储。而当时考虑到浏览器兼容性的问题，更通用的方案是Flash，而如今，localStorage被大多数浏览器所支持，如果你的网站需要支持IE6+，那么userData作为你的polyfil的方案是一种错的选择

sessionStorage

sessionStorage 与localStorage的接口类似，但是保存数据的生命周期不同。做过后端开发的同学了解session这个词的意思是“会话”。而sessionStorage是一个前端的概念，他只是江一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是当页面关闭之后，sessionStorage中的数据就会被清空

特性区别

特性	cookie	localStorage	sessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成cookie，默认是关闭浏览器后失效	除非被清空，否则永久保存	仅在当前会话下有效，关闭页面或者浏览器或被删除
存放数量大小	4KB左右	一般为5MB	一般为5MB
与服务器端通信	每次都会携带zaiHTTP头部，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器中）保存，不参与和服务端的通信	仅在客户端（即浏览器中）保存，不参与和服务端的通信
易用性	需要程序员自己封装，原生的cookie接口不友好	原生接口可以用，也可以再次方砖来对Object和array有更好的支持	原生接口可以用，也可以再次方砖来对Object和array有更好的支持

缓存方案localStorage、sessionStorage简单的使用

sessionStorage

以下代码实现了

在index1.html中将数据写入sessionStorage

在index2中修改数据

最后在index3中获取数据并显示

（入口是index1.html文件）

Index1.html

<body>
    <button style="height: 30px;" onclick="jump()">跳转到session2</button>
    <script>
       //临时存储使用的是key value数据结构
       //注意value值只能是字符串无法存储对象
       //关闭浏览器或者页面后数据会过期
       //如果想要存储对象需要将对象转换成字符串
       //JSON.stringify() 和 JSON.parse()
        var preson = {
            uname: '小明',
            age:'18'
        }
        //将对象转换成字符串
        var presonStr = JSON.stringify(preson);
        console.log(presonStr);
        //写入sessionStorage
        window.sessionStorage.setItem("person",presonStr);
        function jump(){
           //跳转tag页面
            location.replace('index2.html');

        }
    </script>
</body>

index2.html

<body>
    <button style="height: 30px;" onclick="jump()">跳转到session3</button>
    <script>
       //获取数据并转化成对象
        var personStr = sessionStorage.getItem('person');
        var person = JSON.parse(personStr);
			//修改数据
        person.uname = '小红'
        personStr = JSON.stringify(person);
			//再次写入输入
        sessionStorage.setItem('person',personStr)
        function jump(){
           //跳转页面
            location.replace('index3.html');
        }
    </script>
</body>

index3.html

<body>
    从session获取到的名称为：<span id="span_data"> </span>
    <script>
        // 获取span标签
        var span_data = document.getElementById('span_data');
        // 获取sessionStorage中的数据
        var personStr = sessionStorage.getItem('person');
        var person = null;
        if(personStr != null && personStr.length > 0){
            person = JSON.parse(personStr)
            span_data.innerText=JSON.stringify(person.uname);
        }else{
            alert('没有获取到值');
        }
        console.log(personStr);
        
        
    </script>
</body>

localStorage

以下代码实现了

在index1.html中将数据写入localStorage

在index2中修改数据

最后在index3中获取数据并显示

最后在index4.html 中清空localStorage中的数据

localStorage.removeItem(“person”);

（入口是index1.html文件）

Index1.html

<body>
    <button style="height: 30px;" onclick="jump()">跳转到localStorage2</button>
    <script>
       //本地存储使用的是key value数据结构
       //注意value值只能是字符串无法存储对象
       //数据并不会过期
       //如果想要存储对象需要将对象转换成字符串
       //JSON.stringify() 和 JSON.parse()
        var preson = {
            uname: '小明',
            age:'18'
        }
        //将对象转换成字符串
        var presonStr = JSON.stringify(preson);
        console.log(presonStr);
        //localStorage
        window.localStorage.setItem("person",presonStr);
        function jump(){
           //跳转tag页面
            location.replace('index2.html');

        }
    </script>
</body>

index2.html

<body>
    <button style="height: 30px;" onclick="jump()">跳转到localStorage3</button>
    <script>
        var personStr = localStorage.getItem('person');
        var person = JSON.parse(personStr);
        person.uname = '小红'
        personStr = JSON.stringify(person);
        localStorage.setItem('person',personStr)
        function jump(){
            location.replace('index3.html');
        }
    </script>
</body>

index3.html

<body>
    从localStorage获取到的名称为：<span id="span_data"> </span>
    <script>
        // 获取span标签
        var span_data = document.getElementById('span_data');
        // 获取localStorage中的数据
        var personStr = localStorage.getItem('person');
        var person = null;
        if(personStr != null && personStr.length > 0){
            person = JSON.parse(personStr)
            span_data.innerText=JSON.stringify(person.uname);
        }else{
            alert('没有获取到值');
        }
        console.log(personStr);
        
        
    </script>
</body>

Index4.html 清空localStorage

<body>
    <script>
        localStorage.removeItem('person');
    </script>
</body>

梦想称为大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用

三种缓存方案coolKie、localStorage、sessionStoragecookiecookie是小甜饼的意思，顾名思义，cookie确实非常小，他的大小限制在4KB左右。他的主要用途有保存登录信息，比如你登录某个网站市场可以看到记住密码，这通常是通过在cookie中存入一段边界用户身份的数据来实现的。localStoragelocalStorage是HTML5标准中新加入的技术，他并不是什么划时代的新东西，早在IE6就有一个叫userData的东西用于本地存储。而当时考虑到浏览器
复制链接

扫一扫

专栏目录