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>

localStorage,sessionStorage的更多相关文章

  1. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

  2. iOS开发和localStorage/sessionStorage

    一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...

  3. cookie, localStorage, sessionStorage区别

    cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...

  4. localstorage,sessionstorage使用

    今天看了一下HTML5,也算是简单的学习一下吧,HTML5 提供了两种在客户端存储数据的新方法:localstorage,sessionstorage. localStorage - 没有时间限制的数 ...

  5. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  6. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  7. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  8. localStorage sessionStorage 增强版

    1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多 2. 增强了setItem方法 ...

  9. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  10. js中cookie,localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

随机推荐

  1. vue兼容ie

    为了兼容IE github build/webpack.base.conf.js [vuex] vuex requires a Promise polyfill in this browser. // ...

  2. IIS上部署DotNet Core程序

    1.安装托管捆绑包 https://docs.microsoft.com/zh-cn/aspnet/core/host-and-deploy/iis/index?view=aspnetcore-2.1 ...

  3. Jenkins无法读取覆盖率报告的解决方法

    报错信息如下: log 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 coverage-report: [mkdir] Cre ...

  4. 集成学习之Boosting —— Gradient Boosting实现

    Gradient Boosting的一般算法流程 初始化: \(f_0(x) = \mathop{\arg\min}\limits_\gamma \sum\limits_{i=1}^N L(y_i, ...

  5. 5.3 将users表添加到xadmin后台

    在users模块中添加adminx.py文件,是xadmin后台管理默认的文件名,内容是: from .models import EmailVerifyRecord, Banner import x ...

  6. 手机dp和px的转换

    1dp   0.75px  ----> 320*240 1dp   1px      ----->480*320 1dp   1.5px   ----->800*480      4 ...

  7. 在VS2008中使用WSE 3.0【转】

    原文:http://www.cnblogs.com/chenxizhang/archive/2008/07/25/1251626.html 在VS2008中使用WSE 3.0 WSE 是微软推出的一套 ...

  8. HDU4261 Estimation

    题意 Estimation Time Limit: 40000/15000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  9. linux sort 多列正排序,倒排序

    转载:https://segmentfault.com/a/1190000005713784 sort是在Linux里非常常用的一个命令,管排序 sort将文件的每一行作为一个单位,相互比较,比较原则 ...

  10. sublime Text 3安装sublimecodeIntel插件

    下载:https://github.com/SublimeCodeIntel/SublimeCodeIntel   解压到:  data/pacakges目录 安装 Package Control插件 ...