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. Siverlight5 3D 中文环境搭建

    一.测试环境 vs2010旗舰版 win7 64位旗舰版 二.必备工具 1.vs2010 旗舰版 2.vs2010 sp1 补丁 3.silverlight5 tools 也可以去silverligh ...

  2. 最小生成树(prim算法和kruskal算法)

    学习博客:https://www.cnblogs.com/zhangming-blog/p/5414514.html 其实就是加点法:从不属于这个集合的点中找从本集合可以找到的最小边,加入本集合 看代 ...

  3. Eclipse与异常处理

    快捷键:Ctrl+d删除光标所在的这一行 Alt+/ 智能提示 异常处理 异常是阻止当前方法或作用域继续执行的问题,在程序中导致程序中断运行的一些指令. try与catch关键字 try{ //有可能 ...

  4. Hive 基本语法操练(一):表操作

    Hive 和 Mysql 的表操作语句类似,如果熟悉 Mysql,学习Hive 的表操作就非常容易了,下面对 Hive 的表操作进行深入讲解. **(1)先来创建一个表名为student的内部表** ...

  5. Docker最全教程之使用PHP搭建个人博客站点(二十二)

    目录 官方镜像  编写简单的Hello world! 1. 编写Hello world! 2. 编写Dockerfile 3. 构建并运行 4. 直接使用PHP Docker镜像运行PHP脚本 构建自 ...

  6. discuz迁移到虚拟空间后无法上传图片的问题

    discuz X3迁移到虚拟空间后无法上传图片,提示"附件无法保存": 解决方法: 1.看看虚拟空间的容量是不是满了. 2.登录管理员后台,工具->更新缓存.

  7. pat1083. List Grades (25)

    1083. List Grades (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given a l ...

  8. CentOS7.5搭建Hadoop分布式集群

    材料:3台虚拟主机,ip分别为: 192.168.1.201 192.168.1.202 192.168.1.203 1.配置主机名称 三个ip与主机名称分别对应关系如下: 192.168.1.201 ...

  9. Asp.NET MVC+WebAPI跨域调用

    使用jQuery调用WebApi有时会遇到跨域的问题,今天介绍一种可以简单解决跨域问题的方法. 当我们跨域请求WebAPI的时候会提示以下信息: XMLHttpRequest cannot load ...

  10. 关于@webFilter使用@Order无效问题

    前言 在SpringBoot系列文章的<第七章:过滤器.监听器.拦截器>中,小技巧中指出,可使用@Order设置过滤器的执行顺序.由于没有自己求证过,看了相关材料后,想当然的写进了文章中, ...