html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

区别:localStorage无时间限制,除非主动删除数据,否则永不过期;sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

支持:IE7以及IE7以下不支持

sessionStorage和localStorage都具有相同的操作方法,例如setItem、getItem和removeItem等。

setItem:存储value,用法:setItem('key','value');

getItem:获取value,用法:getItem('key','value');

removeItem:删除指定key的value,用法:getItem('key','value');

clear:删清空所有的key/value,用法:getItem('key','value');

<p>本地存储</p>
<input type="button" value='存储到localstorage' onclick="setinfo()">
<input type="button" value="清空所有" onclick="clearAll()">
<input type="button" value="根据key删除" onclick="deleteone()">
<input type="button" value="获取" onclick="getinfo()">
<input type="button" value="遍历" onclick="ergodic()">
<p id='getvalue'></p>
<script>
     //存储信息
function setinfo(){
/*if(typeof window.localStorage == 'undefined'){
alert('浏览暂不支持localStorage')
}*/
if(window.localStorage){
var Storage = window.localStorage;
Storage.setItem("city", "北京");
Storage.setItem("province", "四川");
}else{
alert("浏览暂不支持localStorage")
}
}
//删除指定key的值
function deleteone(){
window.localStorage.removeItem('city');
}
//clear清除所有的key/value
function clearAll(){
var localStorage = window.localStorage;
var sessionStorage = window.sessionStorage;
localStorage.clear();
sessionStorage.clear();
}
//获得指定key的value
function getinfo(){
var getvalue = window.localStorage.getItem('province');
alert(getvalue);
}
//遍历localstorage 使用key()和length
function ergodic(){
var storage = window.localStorage;
//遍历localstorage
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key(i);
var value = storage.getItem(key);
console.log("key:"+key + "值:" + value);
} }
    //纪录刷新了多少次页面
if(sessionStorage.visit){
sessionStorage.visit = Number(sessionStorage.visit) + 1;
}else{
sessionStorage.visit = 1;
}
//key:visit value: 1
document.write('刷新了页面'+sessionStorage.visit+'次')     //利用try/catch处理Safari开启无痕浏览
    //有一种情况,浏览器本身支持localStorage但是无法存入数据,例如Safari的无痕浏览模式

      try{
        window.localStorage.name=1;//能存入不会进入catch
      }catch(e){

        //不能写入
        alert('请关闭无痕浏览')
      }

</script>

html5存储方式localstorage和sessionStorage的更多相关文章

  1. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  2. 前端开发本地存储之localStorage和sessionStorage

    1.localStorage 概念 HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器 ...

  3. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  4. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  5. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  6. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  7. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  8. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  9. HTML5 web存储之LocalStorage和sessionStorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

随机推荐

  1. 锐捷linux客户端常用命令(主要用来连接校园网或公司局域网)

     锐捷访问校园网,.sh脚本文件rjsu*.sh-u 用户名-P 密码-S 参数1保存密码参数0不保存密码   其实:  直接使用md5认证方式输入用户名密码并且配置好ip之后,重新打开网卡即可有一定 ...

  2. 工业物联网或系统集成中应用消息队列(ActiveMQ,C#的demo)的场景全面分析

    1.[连载]<C#通讯(串口和网络)框架的设计与实现> 2.[开源]C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 2.应用SuperIO(SIO)和开源跨平台物联网框 ...

  3. linux使用wkhtmltopdf报错error while loading shared libraries:

    官网提示 linux需要这些动态库.depends on: zlib, fontconfig, freetype, X11 libs (libX11, libXext, libXrender) 在li ...

  4. iOS 报错汇总

    1. Unknown type name 'class'; did you mean 'Class' 问题解决方法 objectice-c 工程中的类(比如 类 A)使用 C++ 文件时  A.m 文 ...

  5. 一位资深程序员大牛给予Java初学者的学习路线建议

    java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...

  6. APP级别处理未捕获异常

    前言: 项目APP有时候会出现Crash,然后就是弹出系统强制退出的对话框,点击关闭APP. 有的APP进行了处理,会发现,当程序出现异常的时候,会Toast一个提示"程序出现异常,3秒后将 ...

  7. iOS UIApplication sharedapplication用法

    应用中打开其他应用 我们来讨论一下,在iOS开发中,如何实现从app1打开app2. 基本的思路就是,可以为app2定义一个URL,在app1中通过打开这个URL来打开app2,在此过程中,可以传送一 ...

  8. mac,/usr/local is not writable 解决方法

    mac,/usr/local is not writable 解决方法 mac 问题 今天在mac上装mongodb,发现提示权限不足问题,错误提示如下: mac安装mongodb错误提示.jpg 尝 ...

  9. 记录一次Quartz2D学习(五)

    (四)内主要讲了绘制状态的保存与恢复 本次主要讲述 缩放,旋转,平移等操作 5.附加操作 5.1 旋转 TIP: 旋转操作主要是对本次渲染的图层进行旋转,旋转的中心为左上角顶点 - (void)dra ...

  10. 【转】你所不知道的HTML <head/> 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...