当前位置: 首页 > news >正文

HTML 5 Web 存储-sessionStorage和localStorage

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。

Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)

html5 web storage的浏览器支持情况

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){
    alert("浏览支持localStorage")
}else{
   alert("浏览暂不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
    alert("浏览暂不支持localStorage")
}

localStorage和sessionStorage操作

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

setItem存储value

 sessionStorage.setItem("key", "value");
 localStorage.setItem("site", "js8.in");

getItem获取value

 var value = sessionStorage.getItem("key");
 var site = localStorage.getItem("site");

removeItem删除key

sessionStorage.removeItem("key");
localStorage.removeItem("site");

clear清除所有的key/value

sessionStorage.clear();
localStorage.clear();

其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage;
for (var i=0, len = storage.length; i  <  len; i++){
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value);
}

storage事件

storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:


if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
}
function handle_storage(e){
    if(!e){e=window.event;}
}

相关文章:

  • 使用Prometheus监控Cloudflare的全球网络
  • 歌词显示控件的实现下——自定义View
  • [内核驱动] miniFilter 内核层与应用程序通信
  • 关于form表单input text 未绑定回车事件跳转问题
  • Android照片墙完整版,完美结合 内存方案 LruCache 和 硬盘方案 DiskLruCache
  • CentOS 7下搭建LAMP并把MySQL单独分离
  • Elasticsearch集群如何扩容机器?
  • React组件间通讯
  • 部分域名返回servfailed(案例)
  • CCNP精粹系列之二十三--BGP单自治系统通信,推荐
  • Ext-js 分页实现 (后台用Spring MVC)
  • 网络知识===wireshark抓包数据分析(一)
  • 用VNC进行远程维护
  • org.springframework.jdbc.BadSqlGrammarException: Cause: java.sql.SQLException: Column count 异常
  • 如何在esxi环境中重启LUN。
  • 分享一款快速APP功能测试工具
  • 时间复杂度分析经典问题——最大子序列和
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • docker python 配置
  • JavaScript设计模式与开发实践系列之策略模式
  • Mybatis初体验
  • MySQL数据库运维之数据恢复
  • nodejs调试方法
  • node-sass 安装卡在 node scripts/install.js 解决办法
  • Sass Day-01
  • SpiderData 2019年2月23日 DApp数据排行榜
  • vue数据传递--我有特殊的实现技巧
  • 第2章 网络文档
  • 工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
  • 马上搞懂 GeoJSON
  • 异步
  • 正则表达式
  • 智能合约开发环境搭建及Hello World合约
  • 容器镜像
  • !!java web学习笔记(一到五)
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • (02)vite环境变量配置
  • (1)(1.13) SiK无线电高级配置(五)
  • (4) PIVOT 和 UPIVOT 的使用
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (备忘)Java Map 遍历
  • (多级缓存)缓存同步
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (九十四)函数和二维数组
  • (论文阅读笔记)Network planning with deep reinforcement learning
  • (四)JPA - JQPL 实现增删改查
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • **CI中自动类加载的用法总结
  • **python多态
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET 简介:跨平台、开源、高性能的开发平台
  • .NET/C# 使窗口永不获得焦点
  • .NET:自动将请求参数绑定到ASPX、ASHX和MVC(菜鸟必看)
  • .secret勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复