1. cookie:存储大小4k 有时间限制,会跟在ajax的请求头上
2. localStorage: 存储大小5M 没有时间限制
3. sessionStorage: 临时会话存储 当浏览器关闭的时候信息自动销毁
注:以上三种都是属于客户端的,传输类型为字符串
服务端==>session:后端的cookie 安全性相比较前三个来说 安全性特别高:https://blog.csdn.net/qq_27965129/article/details/53140755
cookie,localStoraga,sessionStorage 都遵循同源策略
cookie是由服务器设置的,当你发送ajax的时候,无论你是否想要发送cookie,它都会跟在请求头那里。

cookie会话跟踪技术(不存密码)
 
会话,你在浏览器进行操作,这样的行为叫做会话
 
会话结束:关闭浏览器
 
回话跟踪技术:通过一系列的操作,确定用户,记录用户的行为;
 
cookie是服务器写在客户端
 
当你打开第一个新页面时,服务端会判断你当前页面是否有cookie。
 
cookie过期时间默认为会话结束时间,如果设置时间,则到时间后过期。
 
1.设置cookie;
document.cookie = 'name=guoqian';
 
 
document.cookie = 'age=24';
document.cookie = 'address=hunan';
document.cookie = 'user='+encodeURIComponent('张三;'); 
2.封装的cookie;
setCookie('teacher','28');
 
function setCookie(_name,value,day){
 
//var data = new Date();
 
//data.setDate(data.getData()+day)
 
var data = Date.now();
 
data =new Data(data +=day *24*60*60*1000);
 
expires = "expires="+data;
 
document.cookie = ` ${key}=>${value;}${expires} `;
 
}
 
1.获取cookie的方法 
function getcookie(){
 
var arr = docment.cookie.split(";");
 
}
 
 
 
2.获取指定cookie
 
function getCookie(_name){
 
var str = docment.cookie;
 
var arr = str.split(;);
 
var len = arr.length;
 
for(var i=0;i<len;i++){
 
var newarr = arr[i].split('=');
 
if( newarr[0] ==name){
 
return newarr[1]
 
 
} }
 
 
 
 3.删除cookie
 
function removeCookie(_name,_val){
 
 setCookie(_name,_val,-1);
 
}
本地存储 :localStorage()和sessionStorage()
一、localStorage() =》页面传值大,数据量大,不人为清除的话,生命永久,不会清除
 
1.创建localStorage 
 
localStorage.getItem("name");
 
localStorage.setItem("name","张三");
 
localStorage.age = 19;
 
localStorage["sex"] = "男";
 
 //var obj = [{id:0,num:1},{id:1,num:2}];
 //localStorage.setItem("init",JSON.stringify(obj))
 console.log(localStorage.getItem("name"))
 console.log(localStorage.age)
 console.log(localStorage["sex"])
2.删除localStorage 
 
localStorage.removeItem("name")
localStorage.clear()
 
 
3.循环查看localSrorage 
 
for(var i=0;i<localStorage.length;i++){
var _name = localStorage.key(i);
console.log(localStorage.getItem(_name))
}
 
 
 二、sessionStorage: 临时会话存储。 当页面关闭的时候信息自动销毁,只作用于当前窗口,不会作用于其他的窗口。
 
sessionStorage.setIem("key","value");
sessionStorage.clear//清除
 

cookie 和 localStorage 、sessionStorage、 session不同的更多相关文章

  1. js中cookie,localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

  2. cookie和localstorage sessionStorage的概念、区别、使用场景

    本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...

  3. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  4. 简单说下cookie,LocalStorage与SessionStorage.md

    最近在网上看到有人讨论这三个的一些概念与区别,发现自己也一直没有较好的总结,所以查阅了一些资料来阐述一下. 基本概念 cookie cookie英文意思是小甜饼,是原来的网景公司创造,目前是在客户端存 ...

  5. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  6. 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  7. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  8. JS 详解 Cookie、 LocalStorage 与 SessionStorage

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到"记住密码&qu ...

  9. Cookie、LocalStorage 与 SessionStorage的区别在哪里?

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...

  10. [JavaScript] Cookie,localStorage,sessionStorage概述

    Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...

随机推荐

  1. 非局部均值去噪(NL-means)

    非局部均值(NL-means)是近年来提出的一项新型的去噪技术.该方法充分利用了图像中的冗余信息,在去噪的同时能最大程度地保持图像的细节特征.基本思想是:当前像素的估计值由图像中与它具有相似邻域结构的 ...

  2. Dell 笔记本触摸板网页双指滑动黑屏

    # 问题如题 # 解决方法: -- 在网上搜了解决方法,最靠谱的一个是说,开机进BIOS,然后什么都不修改退出,重启就能解决(但是我采用这种方法并没有解决) -- 我自己的解决方法:设备管理器里面卸载 ...

  3. Java面向对象_增强for可变参数与代码块

    1.foreach循环 for(类型 变量名称:数组或集合){ //输出操作 } 2.可变参数:根据需要自动传入任意个数的参数,就是可变参数. 语法:返回值类型 方法名称(数据类型...参数名称){ ...

  4. 利用Python进行数据分析 2017 第二版 项目代码

    最近在学习<利用Python进行数据分析>,找到了github项目的地址, 英文版本,中文版本 (非常感谢翻译中文的作者). mark一下,方便后边学习查找.

  5. 物体检测丨浅析One stage detector「YOLOv1、v2、v3、SSD」

    引言 之前做object detection用到的都是two stage,one stage如YOLO.SSD很少接触,这里开一篇blog简单回顾该系列的发展.很抱歉,我本人只能是蜻蜓点水,很多细节也 ...

  6. springcloud 之 feign的重复性调用 优化

    最近有一个springcloud的feign请求,用于获取坐标经纬度的信息,返回结果永远是固定不变的,所以考虑优化一下,不然每次转换几个坐标都要去请求feign,返回的所有坐标信息,数据量太大导致耗时 ...

  7. python_2开发简单爬虫

    2017年12月03日 16:43:01 独行侠的守望 阅读数:204 标签: python爬虫 更多个人分类: Python编辑版权声明:本文为博主原创文章,转载请注明文章链接. https://b ...

  8. WPF动画的几种模式

    最近在用WPF做简单动画,以下是几点经验总结: 1. 使用DispatcherTimer做动画 VB6的年代大家就用Timer做动画了,不用多解释,这个DispatcherTimer和本身的Timer ...

  9. blog 题解目录

    洛谷: 1.P2430 严酷的训练 2.CF784E Twisted Circuit 3.P1886 滑动窗口 4.P1090 合并果子 5.P1119 灾后重建 6.P1690 贪婪的Copy 7. ...

  10. java集合杂谈

    一:java集合框架如下图所示: 大致说明:看上面的框架图,先抓住它的主干,即Collection和Map. 1.Collection是一个接口,是高度抽象出来的集合,它包含了集合的基本操作和属性.C ...