• 技术文章 >web前端 >前端问答

    html5本地存储有哪些

    青灯夜游青灯夜游2021-11-18 15:18:29原创53

    html5本地存储有:1、localStorage,它的生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在;2、sessionStorage,它仅在当前会话下有效,关闭页面或浏览器后被清除。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    HTML5 Web 存储是本地存储,存储在客户端,包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的,通常以字符串存储。

    localStorage

    localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

            // 1、保存数据到本地
            // 第一个参数是保存的变量名,第二个是赋给变量的值
            localStorage.setItem('Author', 'local');
            // 2、从本地存储获取数据
            localStorage.getItem('Author');
            // 3、从本地存储删除某个已保存的数据
            localStorage.removeItem('Author');
            // 4、清除所有保存的数据
            localStorage.clear();

    1.png

    sessionStorage

    sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。

            // 1、保存数据到本地
            // 第一个参数是保存的变量名,第二个是赋给变量的值
            sessionStorage.setItem('Author', 'session');
            // 2、从本地存储获取数据
            sessionStorage.getItem('Author');
            // 3、从本地存储删除某个已保存的数据
            sessionStorage.removeItem('Author');
            // 4、清除所有保存的数据
            sessionStorage.clear();

    2.png

    复杂数据存储

    上面都是对于简单的数据类型的存储,但当要存储的数据是一个对象或是数组的时候,直接存储是不行的

    错误的存储:

        var user = {
          username: 'liu',
          password: '123456'
        };
        sessionStorage.setItem('user', user);
        console.log(sessionStorage.getItem('user'));

    3.png

    这个时候,就需要转换数据格式。

    存储数据前:利用JSON.stringify将对象转换成字符串

    获取数据后:利用JSON.parse将字符串转换成对象

        var user = {
          username: 'liu',
          password: '123456'
        };
        user = JSON.stringify(user);
        sessionStorage.setItem('user', user);
        var account = sessionStorage.getItem('user');
        console.log(account);
        account = JSON.parse(account)
        console.log(account);

    4.png

    5.png

    推荐教程:《html视频教程

    以上就是html5本地存储有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html5 本地存储
    上一篇:html中文本标签有哪些 下一篇:javascript 中 string是对象吗
    VIP会员

    相关文章推荐

    • HTML5+CSS3动态画出一个大象• 如何使用HTML5+CSS3动态画一个笑脸• 使用HTML5 SVG绘制各种雪花图案• html5怎么设置input只能输入数字• html5有几种doctype声明

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网