sessionStorage & localStorage & cookie

概念

  • html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
  • sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
  • localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
  • Cookie指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据(通常经过加密)。

用途

  • sessionStorage
  • localStorage
  • Cookie: 服务器可以利用Cookies包含信息的任意性来筛选并经常性维护这些信息,以判断在HTTP传输中的状态。Cookies最典型的应用是判定注册用户是否已经登录网站,用户可能会得到提示,是否在下一次进入此网站时保留用户信息以便简化登录手续,这些都是Cookies的功用。另一个重要应用场合是“购物车”之类处理。用户可能会在一段时间内在同一家网站的不同页面中选择不同的商品,这些信息都会写入Cookies,以便在最后付款时提取信息。

特点

  • 内存大小 :

    • 单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
    • localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
  • 存储位置 : cookie是在客户端保存的方案.而session是在服务端保存的方案.
  • 生命周期 :
    • localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在
    • sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
    • cookie是在客户端保存的方案.而session是在服务端保存的方案.如果cookie不设定时间的话就表视它的生命周期为浏览器会话的期间,只要关闭IE,cookie就消失了这种cookie被称为会话cookie.其一般不保存在硬盘上.而是保存在内存中.如果设置了过期时间.那么浏览器会把cookie保存到硬盘中,再次打IE时会依然有效.直到它的有效期超时;注:存储在硬盘中的cookie可以在不同IE间共享;
  • 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
  • 他们均只能存储字符串类型的对象

操作

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

存储 setItem

用途:将value存储到key字段

用法:.setItem( key, value)

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

用途:获取指定key本地存储的值

用法:.getItem(key)

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

用途:删除指定key本地存储的值

用法:.removeItem(key)

sessionStorage.removeItem("key");
localStorage.removeItem("site");
清空 clear

用途:清除所有的key/value

用法:.clear()

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

sessionStorage & localStorage & cookie的更多相关文章

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

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

  2. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  3. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  4. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  5. localStorage、sessionStorage和cookie的区别

    本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.co ...

  6. 浅谈localStorage的使用场景和优劣势,以及sessionStorage和cookie

    一.localStorage,sessionStorage,cookie的简单介绍 localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器 ...

  7. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景(面试向)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  8. sessionStorage & localStorage in-depth

    sessionStorage & localStorage in-depth Web Storage API https://developer.mozilla.org/en-US/docs/ ...

  9. sessionStorage / localStorage

    var referurl = document.referrer; //上级网址 if(referurl.indexOf('address_order')>0){ //判断是否是从上一级地址跳转 ...

随机推荐

  1. 关于yuv与rgb的互转

    来自以下网址:http://stackoverflow.com/questions/9465815/rgb-to-yuv420-algorithm-efficiency #define CLIP(X) ...

  2. SeleniumIDE从0到1 (Selenium IDE 安装)

    换了工作后需要学习到自动化测试,经过一系列的筛选,最终选定了Selenium,原因是因为本人熟悉一点代码,用Selenium比较容易上手.刚开始接触Selenium的小伙伴是不是会觉得不知道从何动手呢 ...

  3. knockoutjs(二)

    Observables(监控属性)Knockout是在下面三个核心功能是建立起来的: 1监控属性(Observables)和依赖跟踪(Dependency tracking) 2声明式绑定(Decla ...

  4. 个人项目制作(PSP)

    计划: 软件的此功能的实现,个人估算需要一个周的时间. 开发阶段: 需求分析: 1> 运动员希望软件可以记录自己的得分项. 2> 运动员希望软件可以记录自己的得分具体细节. 3>运动 ...

  5. easyUI的Dialog和Windows框的应用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. RabbitMQ 入门 Helloworld

    1.介绍 RabbitMQ 是信息传输的中间者.本质上,他从生产者(producers)接收消息,转发这些消息给消费者(consumers).换句话说,他能够按根据你指定的规则进行消息转发.缓冲.和持 ...

  7. EXCEL表格实现万位分隔符效果!

    单击单元格右键 选择自定义单元格格式 选择数字标签 选择自定义 在输入框中输入:###","#### 单击确定即可! 格式刷可以对其他单元格实行同样效果!

  8. 【转】}目前比较全的CSS重设(reset)方法总结

    在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视 ...

  9. Cocos2d-x 核心概念 - 坐标系(UI.OpenGL.世界坐标系.模型坐标系)

    UI坐标系与OpenGL坐标系 UI坐标就是Android和IOS等应用开发时候使用的二维坐标系,原点在左上角 OpenGL坐标是三维坐标,由于Cocos2d-x Lua 底层采用OpenGL渲染,因 ...

  10. css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

    一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class=&quo ...