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

浅谈本地存储之localStorage

阅读更多

localStorage作为HTML5的Web Storage的两种存储方式之一。

 

 

  • 用于持久化本地存储,除非主动删除数据,否则数据是永远不会过期的。
  • 优点:容量大,易用,原生支持
  • 缺点:兼容性问题(IE8以下的版本不支持) | 安全性也差,不适用于保存敏感的数据。
 
1、判断是否支持localStorage
 
 
if(window.localStorage){
   //支持
}else{
  //不支持
}

//或者下面这个
if(typeof window.localStorage == 'undefined'){
   //不支持
}
 
 
2、接口
 
  • localStorage.getItem(key)          ------------获取指定key的本地存储的值
  • localStorage.setItem(key,value)  -----------将value存储到key字段中
  • localStorage.removeItem(key)    ------------删除指定key的本地存储的值
 
注意
  •  localStorage存储的值都是字符串类型,如果你要存储json数据,需要转换一下。
  •  localStorage可以存储多达5M的字符串。会存到一个sqlite的文件中。
  •  localStorage在不同的浏览器中存在不一致的返回值等。
               i.  使用数字索引或者数字字符串索引在FF下赋值没问题,但是获取值方式报错
                     localStorage[1] = 'zhangyaochun'
                     localStorage['1'] = 'fe'
 
               ii. 调用不存在的索引时候FF返回的是Null其他浏览器都是undefined
 
   兼容性
 
 

 
 
 
 
 
 
  • 大小: 77.2 KB
2
1
分享到:
评论

相关推荐

    storejs本地存储localstorage的封装提供简单的API没有依赖

    "storejs本地存储localstorage的封装提供简单的API没有依赖" 这个标题告诉我们,storejs是一个专门针对浏览器本地存储机制——localStorage的轻量级库。它通过封装localStorage,为开发者提供了更易用的API接口,...

    localstorage本地存储工具

    提供get,set,del方法,快捷在本地存储数据,所有浏览器通用(不支持localstorage的,使用cookie保存)

    支持设置过期时间的本地存储localstorage

    标题“支持设置过期时间的本地存储localStorage”指出了一种改进的本地存储方法,即在使用`localStorage`时加入过期时间的概念。这将帮助我们更好地控制存储在客户端的数据,避免因数据过期而引发的问题,同时减少...

    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    localStorage提供持久化的本地存储,数据在用户关闭浏览器后再打开仍可保留。其主要操作方法包括: - `setItem(key, value)`:用于存储数据,`key`为键,`value`为值。 - `getItem(key)`:根据键获取存储的数据。 - ...

    vue使用二次封装存储localStorage

    在Vue.js开发中,我们经常需要与浏览器的本地存储机制如localStorage进行交互,用于保存用户数据或应用状态。为了提高代码的可维护性和复用性,开发者会进行二次封装,创建一个专门处理localStorage操作的工具模块。...

    HTML5 LocalStorage 本地存储刷新值还在

    1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...

    一个本地存储工具控制localStorage和sessionStorage

    本文将详细讲解这个名为“本地存储工具”的项目,它提供了一个统一的API来管理和操作`localStorage`和`sessionStorage`。 首先,`localStorage`和`sessionStorage`的主要区别在于数据的生命周期和作用域。`...

    本地存储localStorage用法详解

    一、什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为...2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cook

    Vue2.0 V1.1版本 增删改查功能,全选单选与取消全选选项,使用localStorage本地存储数据和watch深度监听

    Vue2.0 V1.0的增删改查功 全选单选与取消全选选项, 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习,父传子 子传孙 子传父 传值等学习,全选...

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

    HTML5的LocalStorage和UserData是两种不同的机制,它们都允许网页在用户本地存储数据,从而实现离线应用或者增强用户体验。这两个技术在实现浏览器兼容性方面起着关键作用,特别是对于那些需要在用户关闭浏览器后...

    HTML5 本地存储 LocalStorage详解

    HTML5的本地存储机制,尤其是LocalStorage,是现代Web开发中不可或缺的一部分,它允许开发者在用户的浏览器上持久化地存储数据,而无需借助于Cookie或Flash等传统方式。LocalStorage的引入,解决了早期存储技术如...

    基于jQuery的localStorage购物车.zip

    这个系统是基于jQuery 3.4.1版本构建的,旨在帮助用户在本地存储商品选择,即使页面刷新或关闭,购物车中的商品也不会丢失。以下是关于这个项目的详细知识点: 1. **jQuery**:jQuery是一个流行的JavaScript库,它...

    本地化存储之cookie、localstorage的详细用法

    在前端开发领域,本地化存储是网页应用保存用户数据的关键技术。主要涉及到两种常见的方法:Cookie和LocalStorage。本文将深入探讨这两种技术的详细用法,帮助开发者更好地理解它们的工作原理和应用场景。 首先,...

    JS localStorage实现本地缓存的方法

    一种广泛使用的本地存储方法是使用JavaScript中的localStorage对象。localStorage属于Web Storage的一种,提供了在客户端存储大量数据的能力,并且存储的数据没有过期时间限制,除非我们显式地清除它们。 ### ...

    store:本地存储实现,优先本地存储localStorage,如果浏览器不支持,优雅降级为cookie

    本文将深入探讨“store”这个本地存储实现,以及如何在浏览器不支持localStorage时优雅地降级到使用cookie。 首先,`localStorage`是HTML5引入的一种本地存储机制,它允许Web应用在用户的浏览器上存储大量数据...

    JS实现本地存储信息的方法(基于localStorage与userData)

    总之,`localStorage`和`userData`是JavaScript实现本地存储的两种方式,它们各有优缺点。随着现代浏览器的普及,`localStorage`已经成为更常用的选择,但对于需要兼容旧版IE的场景,`userData`仍然是一个备选方案。...

Global site tag (gtag.js) - Google Analytics