您现在的位置是:首页 > 文章详情文章详情
LocalStorage 存储和读取
会飞的猪
2019-02-17
1218人已围观
简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,jquery插件,插件下载,JS/CSS在线压缩。)-白码驿站
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同(并且在IE8以上的IE版本才支持localStorage这个属性)。所以我们每次使用localStorage的时候可以先去判断一下浏览器是否支持localStorage属性。
if(!window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ //主逻辑业务 }
localStorage的写入,localStorage的写入有三种方法,这里就一一介绍一下
if(!window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); }
一般我们会将JSON存入localStorage中,但是在localStorage会自动将localStorage转换成为字符串形式,这个时候我们可以使用JSON.stringify()这个方法,来将JSON转换成为JSON字符串。
例如:
将数据存储到localStorage中
//将查询的数据保存至LocalStorage function SaveLocalStorage(json) { var curTime = new Date(new Date().getTime() + 7200000);//由于LocalStorage不会过期, 这里可以设置一个过期时间 localStorage.setItem("Element", JSON.stringify({ data: json, time: curTime })); }
获取localStorage中的数据
//获取localStorage中的数据 function GetLocalStorage() { var element = window.localStorage.getItem('Element'); var json = JSON.parse(element); //将LocalStorage 中的数据转换为json var data = eval(json); //如果设置了过期时间, 这里可以判断一下数据有没有过期 if (new Date().getTime() - json.time > 0) { alert("LocalStorage中的数据过期了"); } else { alert("LocalStorage中的数据没有过期"); } }
Tags: JavaScript/Jquery 、 Html
很赞哦! (0)
上一篇:史上最污技术解读
点击排行
文章分类
- C# (211)
- Excel操作 (7)
- Ext.Net (1)
- FTP (7)
- Git (1)
- Html (7)
- JavaScript/Jquery (173)
- Json (5)
- PhotoShop (60)
- Sql Server (48)
- SVN (5)
- Tesseract-ocr图片识别 (5)
- UML (1)
- VS代码折叠插件 (1)
- winform (2)
- 操作IP地址 (5)
- 操作PDF (5)
- 插件 (166)
- 发送邮件 (2)
- 过滤HTML标签 (2)
- 缓存 (1)
- 跨域 (1)
- 目录操作 (14)
- 软件 (25)
- 视屏操作 (2)
- 数据库恢复 (2)
- 数据库优化 (5)
- 图片操作 (16)
- 文件操作 (24)
- 序列化 (3)
- 压缩 (5)
- 验证码 (4)
- 正则表达式 (21)
- 字符串加密 (11)
猜你喜欢
- SQL Prompt 免费下载 (SQL自定义插件的安装与激活:新版)
- Tesseract-OCR 中文识别
- 大公司为什么还在采用过时的技术
- C# 操作Excel , 支持超链接 跳转Sheet 页面,HSSFHyperlink函数
- SQL SERVER 2012 误删数据恢复过程
- X-UA-Compatible 解决IE浏览器样式不兼容问题
- sql Service 海量数据查询,如何提高查询效率--数据库分区
- sql Service 海量数据查询,如何提高查询效率--数据库设计
- LoadRunner 安装+汉化+破解
- C#中构造函数的执行序列(构造函数初始化器 this base)
- html5+ajax实现文件拖拽上传
- sql Service 海量数据查询,如何提高查询效率--SQL语句优化
评 论