localstorage, sessionstorage, cookie | Jing according to the blog

Client commonly used memory in three ways:

• localstorage
• sessionstorage
• cookie

localStorage和sessionStorage

localStorage

localStorage no time limit data storage, that is to say, localStorage is never expires, unless the initiative to remove the data. Data can span multiple windows, ignoring the current session, in the common access to the same domain use.

localStorage.myName = 'liujingzhao'; localStorage[ 'myName'] = 'liujingzhao'; localStorage.setItem( 'SEX', 'MAN'); localStorage.getItem( 'SEX'); localStorage.getItem( 'sex'); console.log(localStorage.length); // key there is case sensitive. // localStorage.setItem('sex','man'); localStorage.removeItem( 'SEX'); localStorage.clear(); // 移除所有数据

localStorage.setItem( '1', 'liujingzhao,m,25,edu'); localStorage.setItem( '2', 'sunhui,w,25,edu'); for( var k in localStorage){ console.log(localStorage.getItem(k)); } // liujingzhao,m,25,edu // sunhui,w,25,edu

sessionStorage

针对一个 session 的数据存储，任何一个页面存储的 信息在窗口中同一域下的页面都可以访问它存储的数 据。每个窗口的值都是独立的，它的数据会因窗口的 关闭而丢失，不同窗口间的sessionStorage是不可以共享的。

sessionStorage.setItem( 'key', 'value'); sessionStorage.getItem( 'key'); sessionStorage.removeItem( 'key'); console.log(sessionStorage.length); sessionStorage.clear();

存储类型

• 数组
• json
• 对象
• 图片
• 脚本
• css样式表

  所有类型需要转化成字符串

使用场景

• 弱网环境
• 利用本地存储，减少网络请求

作用域

sessionStorage和localStorage作用域限定在文档源，
所以页面必须使用那个同一种协议，来自同一个域名，在同一个端口上。

http:www.fenhongshop.com //主机 www.fenhongshop.com 协议 http https:www.fenhongshop.com //https协议 不可以共享存储数据 http:www.kaola.com //不同域名 不可以共享存储数据 http:www.fenhongshop.com:8080 //不同端口 不可以共享存储数据

cookie

addcookie、getcookie、delCookie

function (name, value, days) { days = days || 0; var expires = ""; if (days != 0) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 3600 * 1000)); // getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数 // setTime() 方法以毫秒设置 Date 对象。 expires = "; expires=" + date.toGMTString(); } document.cookie = name + "=" + escape(value) + expires + "; path=/"; } function getcookie(name) { var strcookie = document.cookie; var arrcookie = strcookie.split( "; "); for ( var i = 0; i < arrcookie.length; i++) { var arr = arrcookie[i].split( "="); if (arr[ 0] == name) return arr[ 1]; } return ""; } function delCookie(name) { //删除cookie var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = getcookie(name); if (cval != null) document.cookie = name + "=" + cval + "; path=/;expires=" + exp.toGMTString(); }

区别

• 存储大小
  • cookie存储大小4k
  • localStorage、sessionStorage存储大小5M，建议最大2.5M，防止内存溢出。
• 兼容性
  • cookie兼容性很好
  • localStorage, there are some compatibility issues sessionStorage, but does not affect the normal use
• Limitations, security
  • cookie passed back and forth between the browser and the server, 发送每一个http请求的时候都会出现在http头部and waste bandwidth.
  • cookie use requires packing method.

---

Original: big column  localstorage, sessionstorage, cookie | Jing according to the blog