`
gteam.yu
  • 浏览: 26967 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

(Html 5 新特性)localStorage 介绍

阅读更多
   在Html 5之前,由于没有localStorage,我们要实现记录密码或者自动登录的功能,基本只能依靠Cookie,而现在只能手机已经十分普遍,现在手机上浏览网页无法通过Cookie来实现类似功能,于是Html 5 给我们提供了一个非常好用的行特性localStorage。
   localStorage的功能和Cookie差不多,主要用来记录一些script中需要使用的信息,它的构造和Map十分类似,提供了key/value的查找方式,所以使用起来非常方便。
   localStorage最常用的API有三个,分别是setItem(key, value), getItem(key),remove(key)。通过这三个方法名字也能知道它们各自的作用。顺便给出一些我写的一个方法:
    var saveKeyValue = function(key, value) {
        if (typeof localStorage !== undefined) {
            try {
                localStorage.setItem(key, value);
            } catch (e) {
                if (e == QUOTA_EXCEEDED_ERR) {
                    alert('Quota exceeded');
                }
            }
        }
    };

    var getValueByKey = function(key) {
        var value = localStorage.getItem(key);
        return value == null ? 'empty!' : value;
    };

    var removeKey = function(key) {
        localStorage.removeItem(key);
    };
    
    saveKeyValue('name', 'Jobs');
    alert(getValueByKey('name'));
    removeKey('name');
    alert(getValueByKey('name'));


上面的代码大家也可以到以下地址进行查看(最好使用chrome或者其他支持html5的浏览器)
http://jsfiddle.net/kiddYu619/YAAR8/
0
1
分享到:
评论

相关推荐

    HTML5 localStorage使用总结

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    本地存储localStorage用法详解

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    杂学之(前端localStorage).docx

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    完整版《HTML5高级程序设计》5

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展...

    完整版《HTML5高级程序设计》2

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展...

    HTML5高级程序设计

    本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化,同时揭示了html5 背后的设计原理。从第2 章起,分别围绕构建令人神往的富web 应用,逐一讨论了html5 的canvas、geolocation 、...

    完整版《HTML5高级程序设计》4

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展...

    HTML5高级程序设计.part5

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内...

    HTML5程序设计(第2版).[荷]Peter Lubbers(带详细书签).pdf

    《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。...

    完整版《HTML5高级程序设计》3

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内开展...

    HTML5高级程序设计.part4

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内...

    HTML5高级程序设计.part1

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内...

    HTML5高级程序设计.part2

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内...

    HTML5高级程序设计.part3

    此外,还介绍了当今浏览器对HTML5特性的支持情况。 作者简介  Peter Lubbers Kaazing文档培训主管,旧金山HTML5用户组创建人。作为HTML5和WebSocket的狂热爱好者,Peter常常在国际大会上发言,还在全球范围内...

    前端面经文档-技术要点-面试编程题-资源-html-前端-web-计算机-计算机前端面试题目-校招

    ★ 熟练HTML、CSS、JavaScript开发,熟悉HTML5、CSS3的新特性、动画实现、flex布局、CSS阻塞 情况以及优化HTML5新特性 答:语义化标签、音视频、画布、矢量图、本地存储 1、语义化标签,比如header、footer、nav、...

    利用jQuery+localStorage实现一个简易的计时器示例代码

    在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...

    新版前端高频面试题笔记+课件+源码(HTML+CSS+JavaScript)

    2.html5的新特性? 3.请描述一下cookies,sessionStorage和localStorage的区别? 4.浏览器的渲染机制一般分为几个步骤? …… 二.CSS面试题 1.display: none; 与visibility: hidden;的区别 2.外边距折叠(collapsing ...

    html5声频audio和视频video等新特性详细说明

    在html5中出现了一些新特性: canvas 元素 视频 video 和 声频audio 元素 ; 对本地离线存储(localStorage,sessionStorage)的支持 ; 新增特殊内容元素:article、footer、header、nav、section ; 新增表单控件...

    前端面试必备之html5的新特性

    今天来谈谈前端面试中基本上每次一面的时候都会被问到的一个问题,那就是html5的新特性。这个是学习前端必须掌握的基础知识。 新增的元素 html5新增了一些语义化更好的标签元素。 结构元素 article元素,表示页面中...

Global site tag (gtag.js) - Google Analytics