1 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
 2 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
 3
 4
 5  浏览器支持情况:
 6
 7 浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
 8 要判断浏览器是否支持localStorage可以使用下面的代码:
 9 if(window.localStorage){ alert("浏览支持localStorage")}else{ alert("浏览暂不支持localStorage")}//或者if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage")}
10
11 localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
12  用法:.setItem( key, value)
13 代码示例:
14 sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
15
16
17 getItem获取value用途:获取指定key本地存储的值
18 用法:.getItem(key)
19 代码示例:
20 var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
21
22 removeItem删除key用途:删除指定key本地存储的值
23 用法:.removeItem(key)
24 代码示例:
25 sessionStorage.removeItem("key"); localStorage.removeItem("site");
26
27 clear清除所有的key/value用途:清除所有的key/value
28 用法:.clear()
29 代码示例:
30 sessionStorage.clear(); localStorage.clear();
31  使用实例:
32
33 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
34 <input type='button' onclick='set_item()' value='存值' />
35 <input type='button' onclick='get_item()' value='取值' />
36 <input type='button' onclick='delete_item()' value='删除' />
37 <script>
38 //localStorage 存值永久有效
39 function set_item(){
40  var user = {};
41   user.name = 'Adam Li';
42   user.age  = 25;
43   user.home = 'China';
44  localStorage.setItem('userinfo',JSON.stringify(user));
45 }
46 //localStorage取值
47 function get_item(){
48  var data = JSON.parse(localStorage.getItem('userinfo'));
49  alert("name:"+data.name+"\r age:"+data.age+"\r home:"+data.home);
50 }
51 //localStorage删除指定键对应的值
52 function delete_item(){
53  localStorage.removeItem('userinfo');
54  alert(localStorage.getItem('userinfo'));
55 }
56 </script>
57
58 /*
59
60 sessionStorage使用方法请参照localStorage使用例子,实际应用要用哪个关键看你需求了,如果是要永久保存的,那么就请使用localStorage方法存取值,如果是要浏览关闭会话结束就清除缓存的,当然就得选择sessionStorage方法了
61
62 */

转载于:https://www.cnblogs.com/slmdr9/p/5910401.html

html5 sessionStorage 与 localStorage存储相关推荐

  1. sessionStorage、localStorage存储api

    sessionStorage.localStorage存储api import storage from 'good-storage'// localStoragestorage.set(key,va ...

  2. sessionStorage与localStorage存储 localStorage.getItem(

    WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的user ...

  3. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  4. HTMl5的sessionStorage和localStorage

    转载[http://www.cnblogs.com/yuzhongwusan/archive/2011/12/19/2293347.html] HTMl5的sessionStorage和localSt ...

  5. Java跨域请求cooking共享,关于HTML5中的sessionStorage和localStorage

    需求: 做项目的时大多数情况下我们需要对请求的数据进行多次复用,为了降低请求次数我们需要对请求的数据进行本地存储: 以前用的cooking来存储为本地数据,HTML5后提出sessioStorage. ...

  6. 浏览器本地存储(cookie、sessionStorage和localStorage)

    1.Cookie 特点:存储大小4KB左右:可设置失效时间:通信时会携带在HTTP头中,使用cookie保存过多数据会影响性能. 注意:cookie的跨域可以理解为跨域名,只要二级域名相同,不涉及到端 ...

  7. 前端的存储技术cookie、sessionStorage、localStorage

    HTTP无状态协议是指协议对于事务处理没有记忆能力. 会话跟踪 协议的状态是指下一次传输可以"记住"这次传输信息的能力,无状态是指同一个会话(注意什么叫同一个会话) 的连续两个请求 ...

  8. 计算机浏览器存储技术cookie、sessionStorage、localStorage

    HTTP无状态协议是指协议对于事务处理没有记忆能力. 会话跟踪 协议的状态是指下一次传输可以"记住"这次传输信息的能力,无状态是指同一个会话(注意什么叫同一个会话) 的连续两个请求 ...

  9. web存储详解(cookie、sessionStorage、localStorage、indexedDB)

    目录 一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...

  10. 本地浏览器缓存sessionStorage(临时存储) localStorage(长期存储)的使用

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

最新文章

  1. 我能想到最浪漫的七夕,就是让AI唱一首“我爱你”!
  2. C# 父类类型引用子类的实例理解
  3. Repeater中嵌套DropDownList
  4. 贝佐斯成功拉下马斯克,NASA把SpaceX的独家登月合同暂停了
  5. weekend110(Hadoop)的 第二天笔记
  6. 2018中国国际大数据大会专属报名通道(粉丝专享)开通啦!
  7. cad画直角命令_CAD绘制燃气灶实例
  8. 小米手机卡顿如何解决
  9. Greenplu数据库的部署
  10. 2020-12-07
  11. web前端实战小游戏两则(附源码)
  12. 给wordpess博客的数据库减肥提速
  13. OEE(设备综合效率)
  14. Java实现批量文件加密
  15. noise levels descript
  16. 使用阿里云创建个人云盘
  17. Flyme将在明年“上车”?沈子瑜接棒魅族董事长后称将与华为展开竞争
  18. VMware安装优麒麟20.04LTS
  19. 关闭Windows Server 2012的IE增强安全配置
  20. 金蝶EAS,GUI客户端,编辑界面常用方法,框架方法示例

热门文章

  1. crypto_policy_set_aes_cm_128_hmac_sha1_32/crypto_policy_set_aes_cm_128_hmac_sha1_80找不到
  2. 手机备份时,应该把软件配置也备份起来
  3. VS编译NPAPI:jref类型出错
  4. 拆分工作簿为多个文件_能不能将总表快速拆分为多个工作簿?当然!
  5. 3使用技巧_盆栽金钱树,平时使用“3个”技巧,叶子稠密、基部冒新芽
  6. C# 获取二维数组的元素个数;获取行数,列数
  7. java异常继承哪个类_java异常继承何类,运行时异常与一般异常的区别
  8. 鸿蒙系统翻车了,鸿蒙“翻车”? 网友发现鸿蒙系统居然是安卓9.0
  9. python小代码_python小代码之阶乘求和
  10. 大学python考试会挂科吗_学姐含泪劝告:4个“最难学”的大学专业,考试“挂科”是常态...