localStorage sessionStorage的使用:

与cookie相比,webStorage有很多优势(如本文结尾),所以在选择的时候,优先选择webStorage!

sessionStorage使用方法完全同localStorage一致,不同之处:

1 localStorage:没有时间限制的数据存储,一直存在于浏览器,直到用户清除数据;

2 sessionStorage只针对一个 session 的数据存储,关闭当前网页/窗口就会消失;

 1 if(typeof(Storage)!=="undefined")
 2 {
 3     // 是的! 支持 localStorage  sessionStorage 对象!
 4     // console.log('支持');
 5
 6     //增
 7         //数字
 8     localStorage.setItem("age",28);
 9         //字符串
10     localStorage.setItem('name','guo');
11     localStorage.setItem('lastname','jayson');
12         //数组
13     localStorage.setItem('skills',['html','js','css']);
14     //或者使用如下方式增/改/查
15     // var name='guo';
16     // localStorage.name=name;
17     // var lsName=localStorage.name;
18     //删
19     localStorage.removeItem('name');
20     // localStorage.clear();
21     //改
22     localStorage.setItem('age',29);
23     //查
24     var lsAge=localStorage.getItem("age");
25     var lsLastname=localStorage.getItem("lastname");
26     //遍历所有的item
27     for(var i=0;i<localStorage.length;i++){
28         var lsName=localStorage.key(i);
29         var lsValue=localStorage.getItem(lsName);
30         // console.log(lsValue);
31     }
32
33     //存储对象(集合)的处理
34     var o = {
35         // x:1,
36         // y:2
37         name:'jayson',
38         age:27
39     };
40     var oStr = JSON.stringify(o);    //由于存储的内容都是字符串,序列化对象
41     localStorage.setItem("o",oStr);
42     localStorage.getItem("o");    //{"x":1}     typeof类型:string
43     var one=JSON.parse(localStorage.getItem("o")).name;    //反序列化
44     var two=JSON.parse(localStorage.getItem("o")).age;
45     // console.log(one);
46     // console.log(two);
47
48     // 识别使用哪种存储机制
49     var memory = window.localStorage || (window.UserDataStorage && new UserDataStorage()) || new CookieStorage();
50     // 然后在对应机制中获取数据
51     var memName=memory.getItem("name");
52     // console.log(memName);
53
54 } else {
55     // 抱歉! 不支持 web 存储。
56     console.log('不支持');
57 }

与Cookie相比,Web Storage存在不少的优势,概括为以下几点:

  1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。

  2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

  3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。

  4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。(因此每个域下都有10M的webStorage存储空间)

转载于:https://www.cnblogs.com/jaysonguo/p/6019050.html

html5 webStorage:localStorage sessionStorage相关推荐

  1. html5 session 缓存,关于HTML5中的sessionStorage的会话级缓存使用

    sessionStorage作为HTML5的Web Storage的两种存储方式之一. 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据会被 ...

  2. 客户端 localStorage, sessionStorage, cookie 的区别

    SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...

  3. 本地存储-cookie|localStorage|sessionStorage|indexedDB

    本地存储 本地存储 cookie 如何工作 问题 cookie标准限制 属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...

  4. cookie localStorage sessionStorage _(¦3」∠)_ 看完你居然就懂了!!!

    知识点 cookie sessionStorage localStorage cookie 本身用于浏览器和server通讯 被 "借用" 到本地存储 可用 document.co ...

  5. JavaScript本地存储实践(html5的localStorage和ie的userData)的实例页面

    本地存储解决方案很多,比如Flash SharedObject.Google Gears.Cookie.DOM Storage.User Data.window.name.Silverlight.Op ...

  6. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  7. 本地储存 localstorage sessionstorage 的兼容性,API,特点

    在开发中发现cookie储存会在http请求头中,大大影响了数据请求交互. 现在h5中提供了新的解决方式(API) 存储方式: 1.本地储存 localstorage & sessionsto ...

  8. 浏览器缓存 HTTP缓存-CDN缓存-localstorage/sessionstorage/cookie

    文章目录 浏览器缓存 面试题 概述 HTTP缓存 -提高二次请求响应速度 HTTP的缓存控制,如何设置缓存策略 CDN缓存 -提高首次请求资源的响应速度 CDN的核心功能 CDN的基本原理 local ...

  9. HTML5的LocalStorage和sessionStorage的使用 -缓存

    原文地址:https://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html html5中的Web Storage包括了两种存储方式:sess ...

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

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

最新文章

  1. linux上jar包无法识别本地文件格式,解决使用maven将项目打包成jar包后运行在linux系统中无法读取jar包中文件的问题...
  2. 存储过程内建临时表和临时函数,合并一个由存储过程返回的表
  3. docker 与tomcat整合
  4. ASP.NET操作Word文档(转)
  5. c语言裂变,干货:社群是如何实现裂变的?
  6. mybatis example处理and、or关系的方法
  7. VSTS For Testers读书笔记(5)
  8. Python url编码、url解码
  9. 浙江使用计算机的用量,现在全世界计算机的使用量是多少
  10. AR科技贯穿里约奥运始终 腾讯QQ营销顺风车值了
  11. python 三维图 背景_Python利用matplotlib生成图片背景及图例透明的效果
  12. 12种获取节点和元素的代码
  13. 星际争霸战略战术的发展和创新
  14. 学Python必看,Python中encode(),decode()的本质
  15. 带权有向无环图的最短路径(使用拓扑排序的方法)
  16. 回调函数的概念及使用
  17. 中文字体压缩器-解决css引入的字体太大的问题
  18. 饭店计算机软件系统FIDlLIL,【万迅千里马餐饮管理系统_饭店餐厅管理软件】免费试用_餐饮软件_选软件网...
  19. Cuda11.6 下载与安装[排坑版]
  20. 芯片烧录器编程AT24C02

热门文章

  1. listWdiget控件
  2. 【mysql】【windows】MySQL 服务无法启动,服务没有报告任何错误,请键入 NET HELPMSG 3534 以获得更多的帮助。...
  3. 最长公共子序列lcs 51nod1006
  4. MyEclipse激活步骤
  5. 同时安装CUDA8.0和CUDA9.0
  6. 【mysql】join的用法和修改数据表
  7. SignalR 服务器系统配置要求
  8. bug-箭头函数中this指向的问题
  9. bootstrap页面布局
  10. 单平台软件开发多系统APP