javascript中sessionStorage 、localStorage 和 Cookie

欢迎访问我的博客，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~

参考文章：JS 详解 Cookie、 LocalStorage 与 SessionStorage

下面是个人总结内容：

相同点

用于浏览器端存储的缓存数据

不同点

特性	Cookie	localStorage	sessionStorage
数据的生命期	可设置的失效时间，到达时间自动过期	除非被清除，否则永久保存	仅用于当前会话，浏览器关闭，立即被清除
存放数据大小	4K左右	一般为5MB	一般为5MB
与服务器端通信	携带在HTTP头中，数据会发送到服务器端，可能造成宽带浪费	只在客户端，不参与和服务端的通信	只在客户端，不参与和服务端的通信
易用性	需程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

Cookie：

1. 最好精简，因为本身存放数据大小很小
2. 常用于判断用户登录，对于登录过的用户，浏览器会插入一个唯一的标识，当下次用户需要登录，只要读取到这个值，就能判断当前用户是否登录了

localStorage:

1. 购物车管理工作，一些产生的本地数据用以完成数据持久化

sessionStorage：

多页面表单，按步骤引导用户填写

安全性

Cookie、localStorage 和 sessionStorage三者，只要打开控制台，都能看到这三者存放的数据的，并且能够随意修改，所以会产生风险
而sessionStorage使用了session加密，这样用户看到的数据都是经过加密处理过的，会难以获取正确的标识
但是对于localStorage或者Cookie的数据，就可以被肆意妄为的修改或者伪造了
上面是我个人的一些理解，文章中还提到了XSS注入的风险，关于XSS注入为此我专门查了些文档，推荐一篇自我感觉写的相当详细的Web安全测试之XSS

Web Storage AND Cookie

前者存储空间更大
前者存储内容不会发送到服务器，防止造成宽带浪费
接口丰富
独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，避免造成数据混乱
每个特定的域名下最多生成20个cookie
sessionStorage用于本地存储一个会话存储，关闭会话，随之销毁
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地存储数据而生

一些基本操作

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

setItem存储value

用于存储对象格式的数据

12	sessionStorage.setItem("key", "value"); localStorage.setItem("site", "qqqww");

getItem获取value

获取指定关键字段key本地存储的值

12	var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem删除key

删除指定关键字段key本地存储的值

12	sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear清除所有的key/value

清除所有本地的key/value

12	sessionStorage.clear(); localStorage.clear();

其他操作方法：点操作和[ ]

web Storage不但可以用自身的setItem`,getItem`等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储

var storage = window.localStoragestorage.key1 = "hello"storage["key2"] = "world" console.log(storage.key1)console.log(storage["key2"])

遍历

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历

var storage = window.localStorage;for(var i=0, len=storage.length; i<len;i++){    var key = storage.key(i);         var value = storage.getItem(key);         console.log(key + "=" + value); }

javascript中sessionStorage 、localStorage 和 Cookie相关推荐

关于sessionStorage,localStorage和cookie三者之间相同点与不同点
关于sessionStorage,localStorage和cookie三者之间相同点与不同点类别 sesstionStorage localstorage cookie 存储量 5M(具体看浏览器 ...
sessionStorage localStorage cookie的区别
sessionStorage localStorage cookie的区别基本概念 cookie:是网景公司的前雇员在1993年发明.它的主要用于保存登陆信息,比如登陆某个网站市场可以看到'记住密码 ...
sessionStorage 、localStorage 和 cookie 之间的区别(转)
essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19| 分类: HTML5CSS3WEBAPP|举报|字号订阅 ses ...
sessionStorage localStorage cookie
sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式:sessionStorage和localSt ...
本地缓存的三种方式：sessionStorage、localStorage、Cookie
1.sessionStorage:临时的会话存储只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面,或者在编辑器中更改了代码,存储的会话信息也不会丢失. 2.localStorage:永 ...
sessionStorage 、localStorage 与cookie 的异同点
cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽. userdata,只有ie支持,单个容量64kb,每个域名最多可存1 ...
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage 刚步入工作不久的小白,最近在做一个传感器网站项目的时候是用cookie存取数据,因为网站面向 ...
浅谈 sessionStorage、localStorage、cookie 的区别以及使用
1.sessionStorage.localStorage.cookie 之间的区别相同点 cookie 和 webStorage 都是用来存储客户端的一些信息不同点 localStorage l ...
在JavaScript中操作Cookie
在Windows系统中,cookie通常是被储存在C:\Documents and settings\用户名\cookie目录下(如果系统在C盘).其实每个cookie实际上就是一个文本文件,里面是用 ...

javascript中sessionStorage 、localStorage 和 Cookie

javascript中sessionStorage 、localStorage 和 Cookie

相同点

不同点

应用场景

安全性

Web Storage AND Cookie

一些基本操作

setItem存储value

getItem获取value

removeItem删除key

clear清除所有的key/value

其他操作方法：点操作和[ ]

遍历

javascript中sessionStorage 、localStorage 和 Cookie相关推荐

最新文章

热门文章