客户端常用的存储方式有三种：
- 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 //不同端口 不可以共享存储数据 |
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、sessionStorage 存在一定的兼容性问题，但不影响正常的使用
- 局限、安全性
- cookie在浏览器和服务器间来回传递，
发送每一个http请求的时候都会出现在http头部，浪费带宽。 - cookie的使用需要分装方法。
- cookie在浏览器和服务器间来回传递，
原文:大专栏 localstorage、 sessionstorage、 cookie｜刘景照的博客
原文地址：https://www.cnblogs.com/wangziqiang123/p/11618468.html
时间： 2024-10-31 11:56:02