zoukankan      html  css  js  c++  java
  • localStorage和sessionStorage用法总结及其区别


    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。


    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问
    并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。只允许同一窗口访问。

    而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    </head>
    <body>
    <script>
        //setItem存储value
        localStorage.setItem("name", "徐同保");
        localStorage.setItem("job", "web前端");
    
        //getItem获取value
        var name = localStorage.getItem('name');
        var job = localStorage.getItem('job');
        console.log('姓名:' + name);
        console.log('职业:' + job);
    
        //removeItem删除key
        localStorage.removeItem('name');
        var name = localStorage.getItem('name');
        var job = localStorage.getItem('job');
        console.log('姓名:' + name);
        console.log('职业:' + job);
    
        //clear清除所有的key/value
        localStorage.clear();
        localStorage.removeItem('name');
        var name = localStorage.getItem('name');
        var job = localStorage.getItem('job');
        console.log('姓名:' + name);
        console.log('职业:' + job);
    </script>
    </body>
    </html>


    浏览器支持情况:



    chrome查看方式



  • 相关阅读:
    lsb_release -a 查询Linux系统版本
    html常用标签
    js判断对象是否为空
    springBoot2.x 支持跨域请求配置
    httpclient 上传附件实例
    js 使用sessionStorage总结与实例
    性能测试需求调研分析方法
    jmeter压测实践
    页面加载时调用js函数方法
    IntelliJ IDEA 界面介绍及常用配置
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924974.html
Copyright © 2011-2022 走看看