`
gteam.yu
  • 浏览: 27705 次
  • 性别: 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
分享到:
评论

相关推荐

    HTML 5 新特性介绍(ppt)

    这个压缩包文件包含了多个关于HTML5新特性的介绍,包括“浅谈HTML5_20080804.pps”、“Developing with HTML5.ppt”、“HTML5_Accessibility_faulkner.ppt”、“www.99pan.com_HTML5.ppt”以及“05-18-09-...

    HTML5新特性分享PPT

    每个文件可能分别侧重不同的方面,比如第一个PPT可能主要介绍HTML5的新标签,第二个可能深入JS新API,而第三个则可能详细阐述CSS3的动画效果。通过这三个PPT的学习,开发者可以全面了解并掌握HTML5的最新特性,提升...

    HTML5 LocalStorage和UserData实现兼容多浏览器的本地存储

    LocalStorage是HTML5引入的一种新的Web存储机制,它提供了比传统Cookie更大的存储空间(通常为5MB)。LocalStorage的设计目的是持久化存储,这意味着即使用户关闭浏览器或计算机,存储的数据也不会丢失。它以键值对...

    H5打包成安卓app后,js的localstorage失效报错.pdf

    `localStorage`是HTML5引入的一种本地存储机制,允许Web应用在用户的浏览器中存储大量数据,相比于传统的Cookie,`localStorage`提供了更大的存储空间(通常为5MB),并且数据不会随着HTTP请求发送,从而降低了网络...

    LocalStorage+HTML+CSS+jQuery 实现简易的学生管理系统

    在ES6中,我们可以使用模板字符串、箭头函数、let和const变量声明、类和模块等新特性,使代码更简洁、易读。例如,可以创建一个JavaScript对象表示学生,用数组存储所有学生对象,然后使用数组方法(如push、pop、...

    android与html5的交互——数据库操作,UI操作,以及html5的localStorage、定位功能

    localStorage是HTML5的一个重要特性,它允许在浏览器会话之间持久存储键值对数据。这对于实现应用的本地状态管理非常有用,例如保存用户的偏好设置或游戏进度。在Android中,通过WebView的JavaScript接口,开发者...

    【温故而知新】HTML5存储localStorage:sessionStorage.md

    ### 一、HTML5概述及新增特性 HTML5作为HTML标准的一个重要更新版本,自发布以来就备受关注。它不仅增强了网页的表现力,更重要的是,它引入了一系列的新特性,极大地提升了网页的应用能力和用户体验。 #### 1. ...

    HTML5新特性

    HTML5Gallery等网站展示了大量使用HTML5新特性的优秀案例,对于开发者来说,可以参考这些实例学习如何利用HTML5的新功能来提升网站的用户体验和功能性。HTML5教程则帮助开发者了解如何开始使用这些新特性,以创建...

    基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip

    通过深入理解这个组件的实现,开发者可以更好地利用HTML5的localStorage特性,提升Web应用的用户体验,同时降低后端服务器的压力。这个组件的源代码(localStorage-master)值得仔细研究和学习,以便在实际项目中...

    HTML5 localStorage使用总结

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

    html5canvas示例和api及新特性介绍

    在这个"html5canvas示例和api及新特性介绍"的资料中,你将找到关于Canvas API的详细说明以及HTML5的新特性介绍,非常适合初学者入门学习。 首先,HTML5 Canvas的基本用法是通过JavaScript来操作。在HTML文件中创建...

    基于html5的localstorage的本地存储数据库.zip

    HTML5是现代网页开发的核心标准,它引入了许多新特性,其中一项重要的改进就是对本地存储的支持。本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的...

    期刊HTML5新特性安全研究综述_张玉清1

    【标题】:“期刊HTML5新特性安全研究综述_张玉清1” 【内容概要】:HTML5作为Web应用程序的最新标准,引入了许多新特性,增强了浏览器的功能,但同时也带来了一系列新的安全问题。HTML5的安全性对于保障Web应用的...

    HTML5新特性安全研究综述_张玉清1

    HTML5是Web应用程序的最新标准,它通过引入一系列新特性极大地丰富了浏览器的功能,但也带来了新的安全问题。本文由张玉清、贾岩、雷柯楠、吕少卿和乐洪舟共同撰写,主要探讨了HTML5新特性的安全性,并对相关研究...

    Html5 localStorage入门教程

    HTML5的localStorage是Web开发中的一个重要特性,它允许开发者在用户浏览器上持久地存储数据,这些数据不受浏览器会话的影响,即使用户关闭了浏览器或重新启动电脑,数据仍然存在。这个功能极大地增强了Web应用程序...

    让IE旧版本浏览器也支持HTML5的特性

    通常,这类文章会介绍通过引入JavaScript库或工具来解决这个问题,比如“html5.js”这个文件名所示,可能是一个JavaScript库,用于向旧版IE添加对HTML5特性的兼容性。 标签 "源码" 和 "工具" 提示了解决方案可能...

Global site tag (gtag.js) - Google Analytics