利用H5本地存储localStorage、sessionStorage
最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题。而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储。于是利用了这个...
现代浏览器普遍开始支持H5本地存储,localStorage、sessionStorage。可以用来代替cookie的一部分存储功能,他比cookie存储量更大。比较实用。
两者用法类似。localStorage存储,如果不清除那么一直存在;sessionStorage是在一个会话级别上存在,如果会话关闭,那么就没了。顾名思义吧。
他们存值都是以键值对形式存在,值也是存入字符串类型(如果是对象,就序列化以后再存入)。几乎和memcached,redis这种一样。很好理解。
以下简单演示下增删改查的用法:
<script type="text/javascript"> if(window.sessionStorage){
alert('ok');
}else{
alert('fail');
} // 设置值
sessionStorage.setItem('key_a', 1);
// 取值
var key_a = sessionStorage.getItem('key_a');
console.log(key_a);
// 删除
sessionStorage.removeItem('key_a');
console.log(sessionStorage.getItem('key_a'));// null sessionStorage.setItem('key_b', 1);
sessionStorage.setItem('key_c', 2); // 清除所有键值
sessionStorage.clear();
console.log(sessionStorage.key_b);
console.log(sessionStorage.key_c); console.log('=================='); // 设置值和取值也可以使用.符号,类似于取对象属性
// 设置值
sessionStorage.key_d = 12;
// 取值
var key_d = sessionStorage.key_d;
console.log(key_d); // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null
console.log(sessionStorage.key_null);// undefined
console.log(sessionStorage.getItem('key_null'));// null console.log('==========简单演示一个存放对象的例子========'); var obj = {
a : 12,
b : [1,2,3,4,5],
c : {
x : 'a',
y : ['bb', 12, 'cc', {a:1,b:2}],
z : 1333
}
}; sessionStorage.setItem('page', JSON.stringify(obj)); // 取值
var page = JSON.parse(sessionStorage.getItem('page'));
console.log(page); // 遍历下数组
for(var i=0;i< page.b.length;i++){
console.log(page.b[i]);
}
// 遍历对象,通常用in
for(var j in page.c){
console.log(page.c[j])
} // 删除key
sessionStorage.removeItem('page'); </script>
利用H5本地存储localStorage、sessionStorage的更多相关文章
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- H5本地存储:sessionStorage和localStorage
作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...
- 本地存储 localStorage/sessionStorage/cookie
cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- H5本地存储详细使用教程(localStorage + JSON数据存储应用框架)
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- html5的本地存储localStorage和sessionStorage
html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...
- h5 本地存储
H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...
- H5本地存储(转)
H5本地存储 一.本地存储由来的背景 众所周知Html4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是 ...
随机推荐
- 修改 this 指向
封装函数 f,使 f 的 this 指向指定的对象 function bindThis(f, oTarget) { if(f.bind){ return f.bind(oTarget); }else{ ...
- .NET中资源文件的使用
工作需要,为VB.NET WinForm程序提供一个中英文界面切换功能,大方向有三个ini.XML.资源文件. 首先ini太过时,坚决不打算用.资源文件和XML相比提供了一个资源文件管理器,编写键值对 ...
- IDEA错误:Failed to start end point associated with ProtocolHandler [http-nio-9999] java.net.BindException: Address already in use: bind
日志显示进程端口已被占用,首先需要的是查询什么进程占用了当前的9999端口. 1.win+R输入cmd进入命令界面: 2.输入命令 netstat -ano|findstr "端口号&qu ...
- (网页)Java日志记录框架Logback配置详解(企业级应用解决方案)(转)
转自CSDN: 前言 Logback是现在比较流行的一个日志记录框架,它的配置比较简单学习成本相对较低,所以刚刚接触该框架的朋友不要畏惧,多花点耐心很快就能灵活应用了.本篇博文不会具体介绍Logbac ...
- (后端)异常不仅仅是try/catch
前言 编程时我们往往拿到的是业务流程正确的业务说明文档或规范,但实际开发中却布满荆棘和例外情况,而这些例外中包含业务用例的例外,也包含技术上的例外.对于业务用例的例外我们别无它法,必须要求实施人员与 ...
- Spark Word2Vec算法代码实现
1 import com.hankcs.hanlp.tokenizer.NLPTokenizer import org.apache.hadoop.io.{LongWritable, Text} im ...
- [20170617]vim中调用sqlplus.txt
[20170617]vim中调用sqlplus.txt --//以前写过一篇emacs下调用sqlplus的文章,一直想学emacs,受限制自己掌握vim,对学习它没有兴趣,原链接如下:--//htt ...
- python中常用函数整理
1.map map是python内置的高阶函数,它接收一个函数和一个列表,函数依次作用在列表的每个元素上,返回一个可迭代map对象. class map(object): ""&q ...
- python第二十四天-----作业终于完成啦
作业 1, ATM:模拟实现一个ATM + 购物商城程序 额度 15000或自定义实现购物商城,买东西加入 购物车,调用信用卡接口结账可以提现,手续费5%支持多账户登录支持账户间转账记录每月日常消费流 ...
- 【HANA系列】SAP HANA XS的JavaScript API详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS的Java ...