localStorage sessionStorage学习
来源:互联网 发布:软件无线电接收机 编辑:程序博客网 时间:2024/06/06 09:32
今天有点不想整理了 ,明天开始~~
哈哈哈,大清早的来整理博客啦
什么是localStorage sessionStorage?这两个是H5新增特性,html5中的Web Storage包括了两种存储方式localStorage sessionStorage,是html5 web storage API提供的,可以方便在web请求之间保存数据,有了本地数据,就可以避免数据在浏览器和服务器间不必要的来回传递
这两个特性在浏览器的哪里呢,先上图看看
好了,现在开始学习吧,说到这个顺带也把cookie一起说上吧
先说应用场景:
cookie属于起源较早的,它比较小,大概只有4KB左右。我们在登录某个网站时候,通常会有记住密码这一选项,这个就是通过cookie中存入一顿辨别用户身份的数据来实现的,服务器根据密码生成了一段暗文,然后返回给用户存储起来,用户以后再登录时候,就会带着这段暗文去服务器端校验,缺点是每次HTTP请求时都会带着cookie,所以说cookie存储的数据越少越好
如果要使用localStorage和sessionStorage,首先要看浏览器是否支持本地存储,本地存储是一个window的属性,所以我们可以先检测浏览器是否支持,检查是否支持可以用window.localStorage||window.sessionStorage来检测
localStorage:是H5标准中新加入的技术,存储方法就是直接给window.localStorage添加一个属性,如
var localStorage=window.localStorage;localStorage.first = 3;//设置a为"3"localStorage["first"] = "sfsf";//设置first为"sfsf",覆盖上面的值localStorage.setItem("second","hahha");//设置second为"hahha"var a1 = localStorage["first"];//获取first的值var a2 = localStorage.first;//获取first的值var b = localStorage.getItem("second");//获取second的值localStorage.removeItem("second");//清除c的值显示结果如下:
sessionStorage用法与其类似,这里就不再赘述了,注意,storage只能存储字符串,至于其他的类似对象或者json串需要做下转换即可
var obj = { name:'Jim' }; var str = JSON.stringify(obj); //存入 sessionStorage.obj = str; //读取 str = sessionStorage.obj; //重新转换为对象 obj = JSON.parse(str);
sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。
webStorage带来的好处:
1、在用户断网的情况下,可以从storage中获取信息,这对于尤其是在航空旅行中的用户来说很有帮助
2、减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间的来回传递
3、快速显示数据:性能好,从本地读取数据比通过网络从服务器获取数据快的多,本地数据可以及时获得,在加上整个页面和数据都在本地的话,可以立即显示
4、临时存储:很多数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢失了,这种情况sessionstorage很方便
------------------------------------------------------------------------------------------------------------
好了,大概就写这些了,下面这些从别处博客看到的觉得不错,所以就拷贝来了
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
- localStorage sessionStorage学习
- HTML5的LocalStorage、SessionStorage学习
- #学习笔记#(55)sessionStorage/localStorage
- localStorage、sessionStorage
- sessionStorage localStorage
- localStorage、sessionStorage
- localStorage、sessionStorage
- HTML5学习笔记之 localStorage和sessionStorage
- HTML5学习笔记之 localStorage和sessionStorage
- HTML5学习(4) 数据的存储(localStorage,sessionStorage)
- HTML5 之 SessionStorage & LocalStorage
- HTML5 localStorage and sessionStorage
- sessionStorage 和localStorage 区别
- sessionStorage,localStorage总结
- localStorage、sessionStorage用法总结
- HTML5之localStorage-sessionStorage
- localstorage和sessionstorage
- localStorage、sessionStorage用法总结
- mysql如何更改character-set-server默认为latin1
- 基于DCNN的人脸特征点定位
- jquery 获取浏览器窗口的高度和宽度
- 安装wine
- Knockout的MVVM模式
- localStorage sessionStorage学习
- Python爬虫如何获取动态内容-下
- A Beginner's Guide To Understanding Convolutional Neural Networks - Part 2
- Class类文件加载机制
- Unity3D中Random.seed属性解析
- dinic背诵用模板
- linux一天一个命令
- 安装zh_cn.utf8
- window.location.href/replace/reload()--页面跳转+替换+刷新