客户端常用的存储方式有三种：
- localstorage
- sessionstorage
- cookie
localStorage和sessionStorage
localStorage
localStorage 没有时间限制的数据存储，也就是说， localStorage是永远不会过期的，除非主动删除数据。 数据可跨越多个窗口，无视当前会话，在同一个域中 被共同访问、使用。
localStorage.myName =
'liujingzhao';
localStorage[
'myName'] =
'liujingzhao';
localStorage.setItem(
'SEX',
'MAN');
localStorage.getItem(
'SEX');
localStorage.getItem(
'sex');
console.log(localStorage.length);
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));
}
|
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));
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) {
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、sessionStorage 存在一定的兼容性问题，但不影响正常的使用
- 局限、安全性
- cookie在浏览器和服务器间来回传递，
发送每一个http请求的时候都会出现在http头部，浪费带宽。
- cookie的使用需要分装方法。
原文:大专栏 localstorage、 sessionstorage、 cookie｜刘景照的博客