sessionStorage、localStorage 以及 cookies 区别
前言
在前端开发中,往往会将有些不经常更改的数据缓存到本地,比如用户信息。前端本地缓存的方式有多种,比如 sessionStorage、localStorage 以及 cookies 等。那么这个几个缓存有什么区别,各自又有什么特点呢?将是本文分享的重点。
一、sessionStorage
-
用法
sessionStorage.setItem:存储数据,接收2个参数,一个是 key,一个是 value。
sessionStorage.getItem:获取数据,接收1个参数,参数为 key,可获取 value。
sessionStorage.removeItem:移除指定数据,接收1个参数,参数为 key,移除相应的 value。
sessionStorage.clear:移除所有数据,无参数。
sessionStorage.key:获取指定下标的数据,接收1个参数,参数为 下标值。
sessionStorage.length:属性,获取缓存总数。获取基本类型(字符串、数值等)
//存储缓存数据
sessionStorage.setItem("name","jack");
sessionStorage.setItem("age",18);
//获取缓存数据
var name = sessionStorage.getItem("name");
var age = sessionStorage.getItem("age");
console.log(name)//"jack"
console.log(age)//18
//获取指定下标的缓存数据
sessionStorage.key(0);//"jack"。获取第一个缓存值
//获取缓存总数
sessionStorage.length;//2 ,一共有 2 个缓存
//移除指定缓存
sessionStorage.removeItem("name");//移除name缓存
//移除所有缓存
sessionStorage.clear();移除所有缓存
获取引用类型(对象,数组等)
//存储缓存数据
sessionStorage.setItem("data",JSON.stringify({name:"jack",age:18}));
sessionStorage.setItem("arr",JSON.stringify([1,2]);
//获取缓存数据
var data= JSON.parse(sessionStorage.getItem("data"));
var arr= JSON.parse(sessionStorage.getItem("arr"));
console.log(data)//{name:"jack",age:18};
console.log(arr)//[1,2];
值得注意的是,如果存储的是非基本类型对象,存储的时候需要用 JSON.stringify 转换,获取的时候也需要通过 JSON.parse 转义,才能得到对象类型,否则会强制转换为字符串。
- 特点
(1)特性:HTML5新特性;
(2)存储位置:会话关闭,也就是浏览器关闭时,sessionStorage 缓存会消失,存储在内存;
(3)存储容量:存储容量 5MB 左右;
(4)存储方式:存在客户端,不用传到服务器,节省网络资源;
(5)共享:相同浏览器,相同域名和端口情况下不同页面可共享 sessionStorage 。
二、localStorage
-
用法
localStorage.setItem:存储数据,接收2个参数,一个是 key,一个是 value。
localStorage.getItem:获取数据,接收1个参数,参数为 key,可获取 value。
localStorage.removeItem:移除指定数据,接收1个参数,参数为 key,移除相应的 value。
localStorage.clear:移除所有数据,无参数。
localStorage.key:获取指定下标的数据,接收1个参数,参数为 下标值。
localStorage.length:属性,获取缓存总数。获取基本类型(字符串、数值等)
//存储缓存数据
localStorage.setItem("name","jack");
localStorage.setItem("age",18);
//获取缓存数据
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
console.log(name)//"jack"
console.log(age)//18
//获取指定下标的缓存数据
localStorage.key(0);//"jack"。获取第一个缓存值
//获取缓存总数
localStorage.length;//2 ,一共有 2 个缓存
//移除指定缓存
localStorage.removeItem("name");//移除name缓存
//移除所有缓存
localStorage.clear();移除所有缓存
获取引用类型(对象,数组等)
//存储缓存数据
localStorage.setItem("data",JSON.stringify({name:"jack",age:18}));
localStorage.setItem("arr",JSON.stringify([1,2]);
//获取缓存数据
var data= JSON.parse(localStorage.getItem("data"));
var arr= JSON.parse(localStorage.getItem("arr"));
console.log(data)//{name:"jack",age:18};
console.log(arr)//[1,2];
//移除缓存数据
localStorage.removeItem("name");
localStorage.removeItem("age");
两者在使用上几乎没什么区别。
- 特点
(1)特性:HTML5新特性;
(2)存储位置:localStorage 的存储与会话无关,会永久的保持在本地,除非自动清除,数据存在硬盘。
(3)存储大小:存储容量 5MB 左右;
(4)存储方式:存在客户端,不用传到服务器,节省网络资源;
(5)共享:相同浏览器,相同域名和端口情况下不同页面可共享 localStorage 。
三、cookies
- 用法
//设置cookie
document.cookie = "name=jack;";
//获取cookie
var name=document.cookie.split(";")[0].split("=")[1];
console.log(name);//"jack"
-
特点
(1)特性:属于HTML4的特性;
(2)存储时间:如果不在浏览器中设置过期时间,也就是maxage为负数或者0,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种 cookie 简称会话 cookie。如果在浏览器中设置了 cookie 的过期时间,也就是 maxage 为正数,cookie 就被保存在硬盘中,关闭浏览器后,cookie 数据仍然存在,直到过期时间结束才消失;
(3)存储形式:cookie 只能保存字符串类型,以文本的方式;
(4)存储的大小:单个cookie保存的数据不能超过4kb,不能超过20个; -
缺点
(1)大小和数量有限制,每个 domain 最多只能有 20 条 cookie,每个 cookie 不能超过4KB,否则会被截断;
(2)每次访问都要传送cookie给服务器,浪费带宽;
(3)用户可以操作(禁用)cookie,功能受限;
(4)安全性低,cookie 一旦被劫持,就可以获取用户的 session 信息;
(5)cookie 需要指定作用域,不可以跨域调用。
四、总结
- sessionStorage 和 localStorage 储存对象时,需要通过 JSON.stringify() 方法和 JSON.parse() 方法转换一下,否则强制转换为字符串;
- 目前为止,Firefox3.6 以上、Chrome6 以上、Safari 5 以上、Pera10.50 以上、IE8 以上版本的浏览器支持 sessionStorage 与 localStorage 的使用;
- sessionStorage 和 localStorage (5MB)比 cookies 容量大(4KB)。
- sessionStorage 和 localStorage 不用上传服务器,节约带宽,而 cookies 需要。
- sessionStorage 和 localStorage 不能被用户手动禁用,而 cookies 会。