`

LocalStorage本地存储介绍

 
阅读更多

1,localStorage的操作方法,比较常用的有setItem、getItem和removeItem等
(1)setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

localStorage.setItem("key", "value");

 key是将要存储到本地的值的键名,自己随意取名。

value 就是将要存的值了,

 

(2)getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

var site = localStorage.getItem("key");
或者
var site = localStorage.getItem.key;
就可以得到键key对应的值

 

(3)removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

localStorage.removeItem("key");

 

(4)clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:

localStorage.clear();

 

2,存储和取出json对象

 JSON数据存储在本地,需调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式。

如写入的时候:
var json_data = {id:12,name:"yang",sex:"男"};
storage.setItem("json_data",JSON.stringify(json_data));
读取的时候:
var json_data = JSON.parse(storage.getItem("json_data"));

 

分享到:
评论

相关推荐

    localstorage本地存储工具

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

    HTML5 LocalStorage 本地存储刷新值还在

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

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

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

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

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

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

    这个"基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip"提供了一个经过优化的JavaScript组件,旨在使localStorage的使用更加方便和通用。 localStorage主要提供了两个方法:`setItem`和`...

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

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

    html5中localStorage本地存储的简单使用

    我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。 1、localStorage.name=老王; //第一种设置存储本地数据的方法localStorage 2、localStorage.setItem(color,red); //第二种设置存储本地数据...

    基于bootstrap写的一点localStorage本地储存

    主要介绍了基于bootstrap写的一点localStorage本地储存,需要的朋友可以参考下

    vue使用二次封装存储localStorage

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

    LocalStorage浏览器本地存储使用案例( Echart 矩形数图 )

    在"LocalStorage浏览器本地存储使用案例"中,我们将探讨如何利用LocalStorage来存储和读取数据,并结合Echart库创建可视化图表。 Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,如堆叠柱状...

    JS localStorage实现本地缓存的方法

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

    HTML5 LocalStorage 本地存储详细概括(多图)

    HTML5 LocalStorage 本地存储是Web开发中一种用于持久化数据的重要特性,它允许开发者在用户的浏览器中存储大量数据,而这些数据不会随着浏览器会话的结束而消失。相比于早期的Cookie技术,LocalStorage提供了更大的...

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

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

    localstorage:本地存储混合应用程序

    "localstorage:本地存储混合应用程序" 这个标题暗示了我们讨论的主题是关于Web应用程序中的本地存储机制,特别是与JavaScript中的localStorage API相关,并且它在混合应用程序(Hybrid Applications)中的应用。...

    AngularJS之ionic 框架下实现 Localstorage本地存储

    在本文中,我们将深入探讨如何在AngularJS与Ionic框架下实现Localstorage本地存储。Ionic是一个基于HTML5构建的移动端应用框架,它结合了AngularJS的强大力量,为开发者提供了丰富的UI组件,使得构建高性能的混合...

Global site tag (gtag.js) - Google Analytics