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. 牛客网——A找一找

    链接:https://www.nowcoder.net/acm/contest/71/A来源:牛客网 题目描述 给定n个正整数,请找出其中有多少个数x满足:在这n个数中存在数y=kx,其中k为大于1的 ...

  2. 开源FTP软件FileZilla使用介绍

    简介 FileZilla是一个优秀的开源FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能,如果想自己搭建FTP服务器,FileZilla是一个好选择. 下载 FileZilla有一个中 ...

  3. 201621123005《Java程序设计》第十三次实验总结

    <Java程序设计>第十三周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主 ...

  4. 一个自动化测试工具 UI Recorder

    链接 教程 UI Recorder 是一款零成本UI自动化录制工具,类似于Selenium IDE. UI Recorder 要比Selenium IDE更加强大! UI Recorder 非常简单易 ...

  5. CUDA 安装完成以后如何判断安装是否成功

    最近在家里过寒假,可能这是还在学校里带着最大的福利了,无意之中翻出了多年前买的几本关于CUDA编程的书,于是随便在自己电脑上配置了一下环境,试试能不能把当年没有看完的书给看完了,于是有了今天这个判断C ...

  6. HDU3530 Subsequence(单调队列)

    题意是说给出一个序列,现在要求出这个序列的一个最长子区间,要求子区间的最大值与最小值的差在[m, k]范围内,求区间长度 做法是维护两个队列,一个维护到当前位置的最大值,一个维护最小值,然后计算当前节 ...

  7. Linux的系统suspend和resume

    参考: www.wowotech.net/linux_kenrel/suspend_and_resume.htmlwww.wowotech.net/linux_kenrel/pm_interface. ...

  8. fackbook flow 简单使用

    flow 是一个javascript 静态检查的工具,由facebook 开发, 使用起来简单,方便. 安装 项目初始化 yarn init -y 编译器安装 yarn add --dev babel ...

  9. Spring4中@value用法详解

    版本:spring-framework-4.1 一.概述 为了简化读取properties文件中的配置值,Spring支持@Value注解的方式来获取,这种方式大大简化了项目的配置,业务中也提高了灵活 ...

  10. jenkins初始化配置完后设置了管理员账号密码 网页停留时间长了刷新登录不了了

    好像陆陆续续在几台机子安装到最后正式使用的这台机器都是这样.难道是它自己本身的问题吗?只能网上帖子凑了. 找到.jenkins/config.xml文件:(windows环境就是和initialsec ...