`
emptyhan
  • 浏览: 29836 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5-Local Storage 本地存储

阅读更多
转载自【http://www.656463.com/article/339】

1、HTML 本地存储介绍 
本地存储相当于一个超大型的Cookie,可以通过浏览器存储相关数据

2、HTML5localStorage 操作使用
在HTML5中,本地存储是一个window的属性,包括localStorage和 sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者 用法完全相同。

if (window.localStorage) {
    alert('浏览器支持!');
} else {
    alert('不支持!');
}

三种设置本地存储的方法

localStorage.t1 = "www.656463.com"; 
localStorage["t2"] = "HTML5";
localStorage.setItem("t3","领悟书生");

三种访问本地存储的方法

localStorage.t1; 
localStorage["t2"];
localStorage.getItem("t3");

其他扩展

localStorage.removeItem();//清除
localStorage.clear() //清除所有
localStorage.length //获得多少键
localStorage.key()//获得存储的键内容

3、示例
<!DOCTYPE html>
<head>
<meta charset=gbk>
<title>HTML5 Local Storage 本地存储</title>
</head>
  
<body>
<script type="text/javascript">
    /*if (window.localStorage) {
    alert('浏览器支持!');
    } else {
    alert('不支持!');
    }*/
  
    //设置本地存储
    localStorage.t1 = "www.656463.com"; 
    localStorage["t2"] = "HTML5";
    localStorage.setItem("t3","领悟书生");
      
    //访问本地存储
    for(var i = 0;i<localStorage.length;i++){
    document.write(localStorage.key(i)+"-->"+
                localStorage.getItem(localStorage.key(i))+"<br>")
    }
    localStorage.removeItem("t1");
    localStorage.clear();
</script>
</body>
</html>
分享到:
评论

相关推荐

    前端开源库-local-storage

    在前端开发中,本地存储(Local Storage)是一个重要的特性,它允许Web应用程序在用户的浏览器上持久地存储数据。本文将深入探讨"前端开源库-local-storage"这个项目,它提供了一个简单易用的本地存储API。 首先,...

    angular-local-storage:用于本地存储的 angularJs 模块

    `angular-local-storage` 是一个专门为 AngularJS 设计的插件,它将 localStorage 的操作封装成一个服务,使得在 AngularJS 应用中使用本地存储变得非常简单。通过注入这个服务,我们可以轻松地在控制器、服务或其他...

    前端项目-angular-local-storage.zip

    【标题】"前端项目-angular-local-storage.zip"是一个包含AngularJS模块的前端开发资源包,它主要功能是为AngularJS应用提供浏览器本地存储的接口。这个模块使得开发者能够方便地利用HTML5的localStorage API来存储...

    angular-local-storage:Angular 本地存储服务

    角度本地存储Angular 本地存储服务。安装在您的应用中包含“local-stroage.service.js”。 将“dk.localStorage”作为模块依赖项添加到您的应用程序。用法该模块公开了一个“LocalStorage”工厂,它是 HTML5 ...

    angular-local-storage-:使用浏览器本地存储的简单 AngularJS 方法

    当涉及到在用户关闭或刷新浏览器后仍然保留数据时,浏览器的本地存储(Local Storage)成为一个重要的工具。`angular-local-storage` 是一个 AngularJS 的插件,它为开发者提供了一种方便的方式来操作本地存储。 **...

    JEECG Local storage&Easyui extension

    【JEECG Local storage&Easyui extension】是一个关于在JEECG框架中使用HTML5的本地存储机制(Local Storage)和EasyUI扩展功能的实践。本文将详细介绍这两个方面及其在项目中的应用。 1. **Local Storage** ...

    fun-with-local-storage:面向对象的本地存储操作的入门级示例

    在现代Web应用中,本地存储(Local Storage)是一种至关重要的技术,它允许开发者在用户的浏览器上持久地存储数据。这个“fun-with-local-storage”项目是一个面向对象的本地存储操作入门级示例,非常适合初学者理解...

    Seat-reservation---OOJS-Local-storage:OOJS和本地存储中的座位预定

    在本文中,我们将深入探讨如何使用Object Oriented JavaScript (OOJS) 和浏览器的本地存储机制(Local Storage)来实现一个座位预定系统。标题和描述提到的"Seat-reservation---OOJS-Local-storage"项目,正是将这两...

    前端经典——localstorage本地存储demo.rar

    这个“前端经典——localstorage本地存储demo”压缩包提供了一个示例,帮助开发者深入理解Local Storage的工作原理和用法。下面我们将详细探讨Local Storage的核心概念、用途、API以及在实际开发中的应用。 1. **...

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

    本项目“基于html5的localstorage的本地存储数据库”着重探讨了如何利用HTML5的Local Storage特性来实现一个简单的本地存储数据库,这对于创建离线应用、提升用户体验以及在用户浏览器中保存数据具有重要意义。...

    JS30-15-local-storage:Web Bos的1530 Vanilla JavaScript编码挑战

    15.本地存储JavaScript30进行本地存储19/10/17描述这是本地存储,在Wes Bos提出的每30天30天的Vanilla JavaScript Coding Challenge中,有30个应用程序中的第15个应用程序。 请检查来自的挑战。关于此应用程序: ...

    local-storage:本地存储和事件委托

    本地存储(Local Storage)是HTML5引入的一种持久化数据存储机制,旨在解决传统cookies存储容量有限以及每次请求都发送到服务器的问题。它为Web应用程序提供了一种在用户浏览器中存储大量数据的能力,且这些数据在...

    local-path-provisioner-chart:本地路径提供者图

    为Kubernetes用户提供了一种使用每个节点中的本地存储的方式。 根据用户配置,本地路径提供程序将在节点上自动创建基于hostPath的持久卷。 它利用了Kubernetes引入的,但使其比Kubernetes内置的local卷功能更简单。 ...

    Comment-section-in-local-storage-vanillaJS:在Vanilla JS中创建具有无限级别的注释部分并具有本地存储

    在Vanilla JS(纯JavaScript)中创建一个带有无限层级的评论部分,并且使用本地存储(Local Storage)来持久化数据,是一项常见的Web开发任务。这个项目的目标是构建一个功能完善的评论系统,允许用户添加、编辑和...

    phonegap-storage

    首先,PhoneGap提供两种主要的本地存储机制:SQLite 和 Web Storage。SQLite 是一个关系型数据库,适用于存储大量结构化数据,而Web Storage则分为Local Storage和Session Storage,更适合于存储少量非结构化数据。 ...

    signin-signup-Local-Storage-Contact

    总结来说,"登录-注册-本地存储-联系方式"涵盖了Web开发中的身份验证、数据持久化、表单处理和用户信息管理等多个核心知识点。理解并熟练运用这些技术对于构建安全、高效、用户友好的Web应用至关重要。

    Creating Booklist App Using JavaScript and Web Local Storage.zip

    接着,我们关注Web Local Storage,这是HTML5引入的一个特性,用于在客户端持久存储数据。与Cookie相比,Local Storage具有更大的存储空间(通常为5MB),并且数据不会随着HTTP请求发送到服务器,降低了网络负载。在...

    Client-Side Data Storage Keeping It Local 2016

    HTML5为Web应用提供了更多的本地存储功能,包括IndexedDB、WebSQL以及Application Cache等。本书虽然以Web Storage和Cookies为主要焦点,但读者也可以通过本书的内容对HTML5存储技术有一个基础的理解。 知识点八:...

    vsHandyStorage:方便地将 html 表单与本地或会话存储链接起来

    通过两个指令将 html 形式的数据与本地或会话存储链接起来。 也可以用一个存储绑定多个表单。 vsHandyStorage 使用 ngStorage 模块作为依赖。 安装 bower install vs-handy-storage 用法 | 将 vsHandyStorage.js ...

Global site tag (gtag.js) - Google Analytics