码迷,mamicode.com
首页 > 其他好文 > 详细

localstorage、 sessionstorage、 cookie|刘景照的博客

时间:2019-10-02 23:17:05      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:table   关闭   兼容性问题   css   影响   内存溢出   出现   使用场景   path   

客户端常用的存储方式有三种:

  • 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);
// key存在大小写区分。
// 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
//不同端口 不可以共享存储数据

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、sessionStorage 存在一定的兼容性问题,但不影响正常的使用
  • 局限、安全性
    • cookie在浏览器和服务器间来回传递,发送每一个http请求的时候都会出现在http头部,浪费带宽。
    • cookie的使用需要分装方法。

原文:大专栏  localstorage、 sessionstorage、 cookie|刘景照的博客


localstorage、 sessionstorage、 cookie|刘景照的博客

标签:table   关闭   兼容性问题   css   影响   内存溢出   出现   使用场景   path   

原文地址:https://www.cnblogs.com/wangziqiang123/p/11618468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!