详解Cookie、LocalStorage、SessionStorage
不管是笔试还是面试相信大家都会经常遇到问Cookie、LocalStorage、SessionStorage 这三个不同的,什么不说先上一波图先:
针对他们大小之分应用场景也有不同:
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。localStorage相对cookie大的多,所以可以用来做购物车,h5小游戏,web应用等。
注意:不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS(什么是xxs下回分解) 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
说了他们的好和不好后是时候表演正真技术了(js如何操作他们):
JS设置cookie:
假设在A页面中要保存变量username的值("chentutu")到cookie中,key值为name,则相应的JS代码为:
document.cookie="name="+username;
JS读取cookie:
var username=document.cookie.split(";")[0].split("=")[1];
这是最简单的操作cookie的方法,下面代码给大家展示一下cookie的基本操作:
//写cookies function setCookie(name,value,Days)
{
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
} //读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else
return null;
}
//读取cookie方法二:
function getCookie2(key) {
var arr1 = document.cookie.split('; ');
for (var i = 0; i < arr1.length; i++) {
var arr2 = arr1[i].split('=');
if (arr2[0] == key) {
return unescape(arr2[1]);
}
}
}
//删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
localstorage提供了:localStorage.getItem(name);localStorage.setItem(name, value);localStorage.removeItem(name);等方法,用来处理增、删、查。
最新文章
- Windows Azure Virtual Machine (26) 使用高级存储(SSD)和DS系列VM
- js回调函数(callback)理解
- Visual Studio 2015 预览版 - 支持跨平台开发Android/iOS应用程序(内置安卓模拟器)
- C#操作注册表全攻略
- 词法分析器flex的使用
- 为什么a标签中使用img后的高度多了几个像素?
- Apache+windows server2008 外网访问配置
- MVC3+EF4.1学习系列(六)-----导航属性数据更新的处理
- [Hive_5] Hive 的 JDBC 编程
- LOJ6089 小Y的背包计数问题(根号优化背包)
- nc linux命令详解
- Windows文件夹、文件源代码对比工具--WinMerge
- Docker 安装 oracle 并使用 navicat 实现外部连接
- hdu 2825
- relay.index&#39; not found
- 【Unity】10.4 类人动画角色的控制
- 实现自己的ls命令
- Activity被回收导致fragment的getActivity为空
- Android pm 命令详解
- 《剑指offer》面试题45 圆圈中最后剩下的数字(Java版本)