js中cookie,localStorage(sessionStorage)的存取
一、cookie
(原生的不好用,自己简单封装)
1. 存cookie的方法:
function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
} 2.取cookie的方法:
function getCookie(c_name) {
if (document.cookie.length>0) {
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1) {
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
} 3.操作示例
//设置cookie,有效期为365天
//setCookie('username','123',365);
//取回,若cookie失效,将返回空
///getCookie('username'); 4.测试注意:javascript在chrome浏览器中不支持本地调试cookie,用firefox亲测可以,如果一定要在chrome中调试,要将代码放到服务器才可以调试。 二、localStorage(sessionStorage)
1. 存储localStorage(sessionStorage)
localStorage.setItem("key", "value"); sessionStorage.setItem("key", "value");
2. 获取key对应的value值
var value= localStorage.getItem("key"); var value = sessionStorage.getItem("key");
3. 删除指定key本地存储的值
localStorage.removeItem("key"); sessionStorage.removeItem("key");
4. 清除所有的key/value
localStorage.clear(); sessionStorage.clear();
5. 存储的数据遍历
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);
}
三、cookie,localStorage,sessionStorage的基本概念及区别
Cookie
Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
localStorage
localStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+,那以 userData 作为你的 polyfill 的方案是种不错的选择。
sessionStorage
sessionStorage 与 localStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
特性 | Cookie | localStorage | sessionStorage |
---|---|---|---|
数据的生命期 | 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅在当前会话下有效,关闭页面或浏览器后被清除 |
存放数据大小 | 4K左右 | 一般为5MB | |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 | |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
应用场景
有了对上面这些差别的直观理解,我们就可以讨论三者的应用场景了。
因为考虑到每个 HTTP 请求都会带着 Cookie 的信息,所以 Cookie 当然是能精简就精简啦,比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户,服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码,下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie 来保存用户在电商网站的购物车信息,如今有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了~
而另一方面 localStorage 接替了 Cookie 管理购物车的工作,同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。如果遇到一些内容特别多的表单,为了优化用户体验,我们可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。
四、安全性的考虑
需要注意的是,不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候,需要时刻注意是否有代码存在 XSS 注入的风险。因为只要打开控制台,你就随意修改它们的值,也就是说如果你的网站中有 XSS 的风险,它们就能对你的 localStorage 肆意妄为。所以千万不要用它们存储你系统中的敏感数据。
链接:https://www.cnblogs.com/minigrasshopper/p/8064367.html
js中cookie,localStorage(sessionStorage)的存取的更多相关文章
- js中cookie、sessionStorage、localStorage
一.cookie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Cookie localStorage sessionStorage
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...
- cookie, localStorage, sessionStorage区别
cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...
- js中cookie的使用
js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...
- js中cookie操作
js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...
- js 中cookie 使用
一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...
- jquery.cookie.js中$.cookie() 使用方法
定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.coo ...
- js中cookie的使用 以及缺点
什么是Cookie Cookie意为“甜饼”,是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox. ...
随机推荐
- SQL语句关联查询
一:连接类型: 关联查询:只有存在关联的表才能关联查询,完全独立的表之间无法关联 1.关联的类型:自关联,左关联,右关联,全关联(full join)两张表都是主表 2.关联的表:两张以上,以一张(或 ...
- Win7 VS2015环境使用SDL2-2.0.4
之前在VS中使用SDL2,如果只链接SDL2.lib,会提示 error LNK2019: unresolved external symbol _main referenced in functio ...
- boost--ref
1.ref简介 reference_wrapper包含在ref库中,它是引用包装器类型,即其内部包装了引用. 成员函数get().get_pointer()分别可以获得被包装的引用和其指针.使用需要包 ...
- 范围for循环(c++11)
1.概念 1)c++11新标准下用范围for循环来遍历序列 2)使用范围for循环时,如果要修改序列中的元素,则必须把循环变量定义成引用类型: int main() { string s = &quo ...
- chmod用法
以下是chmod的详细用法:chmod命令用于改变linux系统文件或目录的访问权限.用它控制文件或目录的访问权限.该命令有两种用法.一种是包含字母和操作符表达式的文字设定法:另一种是包含数字的数字设 ...
- 5.Vue临时上传文件夹
1.在项目目录中,通过npm install multiparty进行安装必要组件npm install multiparty --save-dev 2.app.js中添加app.use(bodyPa ...
- offsetHeight、scrollHeight、clientHeight、height
对这几项进行彻底研究. 第一步:纯净div,没有margin,padding,border,height设置为200px. 添加滚动条,overflow:scroll,结果div的高度被压缩,因为被滚 ...
- C#-VS远程通信
上下文 应用程序内的一套规则.例如使用了begentransaction,就建立了一个规则:再如把synchronization特性应用到某个对象,是多个线程轮流访问这个对象,这也在当前应用产生了一个 ...
- c语言:简单排序:冒泡排序法、选择排序法、插入排序法(待写)
1.冒泡排序法: 假设有n个数需要按从小到大排序,冒泡排序的原理是,在这一排数字中,将第一个数与第二个数比较大小,如果后面的比前面的小,就将他们交换位置.然后再比较第二个和第三个,再交换,直到第n-1 ...
- 20155326 第12周课堂实践总结(二)String类和Arrays类的学习
20155326 第12周课堂实践总结(二)String类和Arrays类的学习 实践二 Arrays和String单元测试 实践题目 在IDEA中以TDD的方式对String类和Arrays类进行学 ...