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"));
相关推荐
提供get,set,del方法,快捷在本地存储数据,所有浏览器通用(不支持localstorage的,使用cookie保存)
1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...
Vue2.0 V1.0的增删改查功 全选单选与取消全选选项, 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习,父传子 子传孙 子传父 传值等学习,全选...
这个“前端经典——localstorage本地存储demo”压缩包提供了一个示例,帮助开发者深入理解Local Storage的工作原理和用法。下面我们将详细探讨Local Storage的核心概念、用途、API以及在实际开发中的应用。 1. **...
这个"基于html5 localStorage本地存储的一个简易改造封装使其变通用的js组件.zip"提供了一个经过优化的JavaScript组件,旨在使localStorage的使用更加方便和通用。 localStorage主要提供了两个方法:`setItem`和`...
"storejs本地存储localstorage的封装提供简单的API没有依赖" 这个标题告诉我们,storejs是一个专门针对浏览器本地存储机制——localStorage的轻量级库。它通过封装localStorage,为开发者提供了更易用的API接口,...
我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。 1、localStorage.name=老王; //第一种设置存储本地数据的方法localStorage 2、localStorage.setItem(color,red); //第二种设置存储本地数据...
主要介绍了基于bootstrap写的一点localStorage本地储存,需要的朋友可以参考下
在Vue.js开发中,我们经常需要与浏览器的本地存储机制如localStorage进行交互,用于保存用户数据或应用状态。为了提高代码的可维护性和复用性,开发者会进行二次封装,创建一个专门处理localStorage操作的工具模块。...
在"LocalStorage浏览器本地存储使用案例"中,我们将探讨如何利用LocalStorage来存储和读取数据,并结合Echart库创建可视化图表。 Echarts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型,如堆叠柱状...
一种广泛使用的本地存储方法是使用JavaScript中的localStorage对象。localStorage属于Web Storage的一种,提供了在客户端存储大量数据的能力,并且存储的数据没有过期时间限制,除非我们显式地清除它们。 ### ...
HTML5 LocalStorage 本地存储是Web开发中一种用于持久化数据的重要特性,它允许开发者在用户的浏览器中存储大量数据,而这些数据不会随着浏览器会话的结束而消失。相比于早期的Cookie技术,LocalStorage提供了更大的...
标题“支持设置过期时间的本地存储localStorage”指出了一种改进的本地存储方法,即在使用`localStorage`时加入过期时间的概念。这将帮助我们更好地控制存储在客户端的数据,避免因数据过期而引发的问题,同时减少...
"localstorage:本地存储混合应用程序" 这个标题暗示了我们讨论的主题是关于Web应用程序中的本地存储机制,特别是与JavaScript中的localStorage API相关,并且它在混合应用程序(Hybrid Applications)中的应用。...
在本文中,我们将深入探讨如何在AngularJS与Ionic框架下实现Localstorage本地存储。Ionic是一个基于HTML5构建的移动端应用框架,它结合了AngularJS的强大力量,为开发者提供了丰富的UI组件,使得构建高性能的混合...