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. TypeScript之面向对象初体验

    1.安装nodejs和vscode: nodejs : https://nodejs.org/en/ Visual Studio Code :  https://www.visualstudio.co ...

  2. 新手入门JUnit单元测试

    首先将JUnit插件安装到Eclipse或myeclipse里面,编写完一个模块或者实体类的时候,直接右击,new一个JUnit项目,选择你想测试的实体类(模块),然后会自动生成一个类,这个类,我们将 ...

  3. 多线程并发同一个表问题(li)

    现有数据库开发过程中对事务的控制.事务锁.行锁.表锁的发现缺乏必要的方法和手段,通过以下手段可以丰富我们处理开发过程中处理锁问题的方法.For Update和For Update of使用户能够锁定指 ...

  4. 为什么applicationContext.xml和spring-servlet.xml中都有注解过滤<context:component-scan base-package="myproject"> 和<context:component-scan base-package="myproject.controller" />

    在刚学习SpringMVC框架整合时,你也许会产生疑问为什么Spring.xml和SpringMVC.xml中都有注解过滤. <context:component-scan base-packa ...

  5. ++a和a++的区别

    另: short s = 4; s = s + 1; // 编译不通过.因为编译器无法判断等号右边的运算结果是否依然在等号左边的short类型范围内,容易丢失精度. s += 1; // 编译通过.+ ...

  6. Cleave.js – 自动格式化表单输入框的文本内容

    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...

  7. canvas 制作flappy bird(像素小鸟)全流程

    flappy bird制作全流程: 一.前言 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时, 近年来移动web的普及为 ...

  8. linux安装中文语言包

    相关配置如下: yum install fonts-chinese.noarch yum install m17n-db-common-cjk yum install m17n-db-chinese安 ...

  9. Scala 包

    包的绝对地址_root_.开始 如_root_.scala.collection.mutable.ArrayBuffer

  10. Android中webView和网页的交互

     Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...