H5的storage有sessionstorage&localStorage，其中他们的共同特点是API相同

下面直接上代码，storage中的存储与删除:

<!DOCTYPE html>

H5的storage

<input type='button' onclick='setItems()' value='存值'　/>
<input type='button' onclick='getItems()' value='取值'　/>
<input type='button' onclick='deleteItem()' value='删除'　/>

而 cookie localStorage sessionStorage 区别
1、cookie
在客户端记录信息确定用户身份。
由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。就给客户端们颁发一个通行证，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。
客户端发送一个http请求到服务器端
服务器端发送一个http响应到客户端，其中包含Set-Cookie头部
客户端发送一个http请求到服务器端，其中包含Cookie头部
服务器端发送一个http响应到客户端

2、localStorage
localStorage 是 HTML5 标准中新加入的技术，规则事先已经设定好了，要访问同一个localStorage对象，页面必须来自同一个域名，子域名无效，使用同一种协议，在同一个端口，数据会保留到通过js删除或者用户删除浏览器缓存。

3、sessionStorage
sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

4、三者对比
特性 Cookie localStorage sessionStorage
存放位置
浏览器端
浏览器端
浏览器端
数据的生命期 可设置失效时间，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
作用域z
同源窗口中共享
同源窗口中共享
不可在不同浏览器窗口中共享
与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。（服务器与客户端可互传） 仅在客户端（即浏览器）中保存，不参与和服务器的通信 仅在客户端（即浏览器）中保存，不参与和服务器的通信

js 暂时存储 sessionStorge的更多相关文章

  1. git用法之常用命令［克隆、提交］

    1.克隆/下载项目 1)git clone git@git.soydai.cn:liuxuewen/static-file-3.0.git 或者 2)git clone http://git.soyd ...

  2. 【js】了解前端缓存，收获不止于此！

    了解前端缓存,收获不止于此! 这次我们来讲一下关于前端缓存的问题.感谢赵欢同学提供doc素材. 首先,开局我画了一张图,你会对文章有一个大局了解. 今天讲的是前端缓存. 前端缓存有3大种:如图,分为H ...

  3. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  4. 疯狂Html+CSS+JS 中JS总结

    来自:http://mzkmzk.github.io/blog/2015/10/05/amazeing-js/ 0 总结 本书的JS 第一章有讲语法有挺多常见的坑点和原理解释很不错 第二章DOM编程讲 ...

  5. js备忘录模式

    备忘录(Memento):在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. 备忘录模式比较适用于功能比较复杂的,但需要维护或记录属性 ...

  6. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

随机推荐

  1. vim技巧4 删除/保留文本中匹配行

    vim技巧:如何删除/保留文本中特定的行呢? <ol><a href="/ss/ss/www"> show invisibles</a> < ...

  2. 深入理解JVM（9）——类加载的过程

    加载是类加载的第一步. 一.加载 a)加载的过程 1)通过一个类的全限定名获取这个类的二进制字节流,也就是class文件 2)将二进制字节流的存储结构转换为特定的数据结构,存储在方法区 3)在内存中创 ...

  3. 小甲鱼Python第五讲课后习题

    0.Python中,int表示整型 bool:布尔类型 float:浮点型 str:字符串类型 1.为什么布尔类型(bool)的TRUE和FALSE分别用0和1表示? 计算机只认识二进制,由于二进制只 ...

  4. JQ03

    JQ03 1.val方法 val方法用于设置和获取表单元素的值,如input/textarea 1)设置与获取: .val("需要设置的字符串"): .val();//获取字符串 ...

  5. JAVA自学笔记20

    JAVA自学笔记20 1.递归: 1)方法定义中定义中调用方法本身的现象 2)要有出口,否则就是死递归 次数不能太多.否则内存将溢出 构造方法不能递归使用 //斐波那契数列:1,1,2,3,5,8,1 ...

  6. CentOS下安装Jenkins（Docker/war/tomcat/java -jar）

    参考官方提供的安装教程:https://jenkins.io/doc/book/installing/,可以发现官方推荐使用Docker进行安装.虽然用Docker有很多好处,但也有缺点. 下面是各种 ...

  7. Deepin 15.4 如何使用 罗技无线键盘/鼠标（采用优联技术）

    1.罗技的“无线优联技术”还是非常强大的,它跟具体的操作系统无关: 2.你只需要 让“优联接收器(一个USB设备)”跟 “无线键盘/鼠标” 配对即可,配对完之后,就无需再配对,即使把“优联接收器”插到 ...

  8. .net 多态

    https://espider.github.io/CLR/inheritance-polymorphism/

  9. C#轻量级配置文件组件EasyJsonConfig

    一.课程介绍 一.本次分享课程<C#轻量级配置文件EasyJsonConfig>适合人群如下: 1.有一定的NET开发基础. 2.喜欢阿笨的干货分享课程的童鞋们. 二.今天我们要如何优雅解 ...

  10. sqlserver数据库出现可疑错误修复方法

    一.主数据库出现可疑修复方法: 第一种方法: 当数据库发生这种操作故障时,可以按如下操作步骤可处理此要领,打开数据库里的Sql查询编辑器窗口,运行以下的命令: ?修改数据库为紧急模式 ALTER DA ...