localstorage本地存储
本文来自:http://2806814127.iteye.com/blog/2314656
本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,除非清空本地的数据,后者只是伴随着session,窗口一旦关闭就没了。两者的用法完全一样。存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,例如:
- localStorage.a = 1;//设置a为"3"
- localStorage["a"] = "nihao";//a的新值会覆盖上面的值;
- localStorage.setItem("b","hello");//设置b为"hello";
- var a1 = localStorage["a"];//获取a的值
- var a2 = localStorage.a;//获取a的值
- var b = localStorage.getItem("b");//获取b的值
- localStorage.removeItem("c");//清除c的值
最常使用的是getItem()和setItem()方法,清除键值对使用removeItem()。如果希望一次性清除所有的键值对,使用clear()。另外HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:
- var storage = window.localStorage;
- function showStorage(){
- for(var i=0;i<storage.length;i++){
- //key(i)获得相应的键,再用getItem()方法获得对应的值
- document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
- }
- }
需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以在存和读取的时候,需要自己进行类型的转换,目前javascript使用非常多的json格式,可以直接调用JSON.stringify()将其转为字符串。读取出来后调用JSON.parse()将字符串转为json格式,如下所示:
- //本地存取对象
- var cartInfo={classification: "饮料",name: "可口可乐", price: "3", unit: "瓶"};
- localStorage.setItem("data",JSON.stringify(cartInfo)); // 往本地存 cartInfo这个对象
- var cartInfo=JSON.parse(localStorage.getItem("data"));//从本地取出 cartInfo这个对象
- //本地也可以存取元素为对象的数组,和上面的方法一样
- var cartList =[
- {classification: "饮料",name: "可口可乐", price: "3", unit:“瓶”},
- {classification: "饮料",name: "雪碧", price : "3", unit:“瓶”},
- {classification: "水果", name: "苹果", price : "5.5", unit: "斤"},
- {classification: "水果", name: "荔枝", price: "15", unit: "斤"},
- {classification: "生活用品",name: "电池", price : "2", unit:“个”},
- {classification: "食品", name: "方便面", price: "4.5", unit: "袋"},
- ];
- localStorage.setItem("cartList",JSON.stringify(cartList)); // 往本地存cartList这个数组
- cartList=JSON.parse(localStorage.getItem("cartList")); //从本地取出 cartList这个数组
localstorage本地存储相关推荐
- html5保存资源本地,html5之Localstorage本地存储
题外话 今天把博客里面的内容,同步在github的issues中了.具体地址是:https://github.com/confidence68/blog/issues ,欢迎大家访问,给star. L ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- js本地存储函数封装基于localStorage本地存储
函数封装 //基于localStorage本地存储 var store={set:function(name, value, day) { // 设置let d = new Date()let tim ...
- JS9day(BOM对象模型,setTimeout定时器,JS单线程执行机制,location对象,swiper插件,localStorage本地存储,购物车案例升级版,学习信息案例(本地存储))
文章目录 BOM简介 定时器-延时函数 5秒关闭广告案例 递归模拟setInterval函数 两种定时器对比 JS 执行机制 location对象 navigator对象 histroy对象(了解) ...
- HTML5 API详解(9):大家都知道的 localStorage 本地存储
提到本地存储localStorage就不得不提sessionStorage和cookie这两个.其中localStorage和sessionStorage可以合成称为web Storage. 这里比较 ...
- HTML5 LocalStorage 本地存储
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- HTML5 LocalStorage 本地存储,刷新值还在
这里是新手了解,生产用到的话,请移到具有兼容性好的 store.js H5的两种存储技术的最大区别就是生命周期. 1. localStorage是本地存储,存储期限不限: 2. sessionStor ...
- HTML5 LocalStorage 本地存储原理详解
说到Web开发中的本地存储,大家最先想到的应该就是Cookies这玩意了,最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太 ...
- localStorage本地存储的用法
localStorage.getItem(key):获取指定key本地存储的值 localStorage.setItem(key,value):将value存储到key字段 localStorage. ...
最新文章
- java并发编程(2)——wait和notify解析
- 设计进步,记一笔,控制层的代码,他不光控制还要校验数据!以前理解错啦
- JS之字符串分割方法split
- JAVA高级工程师课程笔记整理——(八)tomcat与九大内置对象
- strcpy与strcat函数原型
- 用python画长方形_Python+opencv:绘制矩形,编写文本,PythonOpenCV,画,矩形框
- Ubuntu Sublime Text 3 搜狗拼音
- DataX不支持Mysql8.x
- 通过php jq ajax 提交form表单
- 弦图(Echarts)
- opencv-python 银行卡卡号识别
- 然并卵却很拉风!360超级充电器评测_天极网
- Android MTK系统编译与调试命令
- Android ROM适配基础
- 详解RocketMQ中的consumer
- 我所玩过的GALGAME——メンアットワーク!魔兽学院men at work2的中文版《永远的羁绊》全攻略...
- 史上最全的BAT Mysql面试题在这里
- 国科大学习资料--模式识别与机器学习(黄庆明)--2019期末考试题(含答案)
- 计算机电源分金牌,都在说电源就该买金牌,必须了解这个认证到底有多重要
- vs开发revit2016_2016年重要的软件开发发展
热门文章
- 命令行下(bat)使用 Lhaplus 自动 压缩 解压文件 (含参数设定说明)
- 重新启动postgre报错时,解决方案 ( 由备份文件占用空间太大造成 ) (linux 命令 df -h 查看磁盘空间)
- mysql 索引越界_mysql隐式转换造成索引失效的事故总结
- 【SQL】含有NULL值的排序
- 我什么时候应该使用懒惰 <T> ?
- 如何在C中纯粹编写iOS应用程序
- 如何在Python中打印到stderr?
- Win10电脑如何查看电脑配置
- java option_option 的经典属性
- java 读取mysql日志_如何在MySQL中查看日志文件?