今天主要的学习内容是cookie与本地储存的知识,

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

而读取、写、删除操作方法有很多方法,也很简单,但长用getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。

localStorage.setItem("user","abcd");
localStorage.setItem("user1","abcd1");
localStorage.removeItem("user");

在说说cookie。

cookie 是存储于访问者的计算机中的变量,用来存放一些数据。在我们浏览页面时,经常会填写自己的名字等,这些会被存放于cookie中。

学习cookie主要有3个函数,包括创建cookie,获取cookie中的值,删除cookie。

创建cookie:

function setcookie(name,value,iday){

  var odate=new Date();

  odate.setDate(odate.getDate()+iday);

  document.cookie=name+"="+value+";expires="+odate;

}

获取cookie:

function setcookie(name){

  var cookies=document.cookie;

  var arr1=cookies.split("; ");

  for (i=0;i<arr1.length;i++){

    var arr2=arr1[i].split("=")

    if(name==arr2[0]){

      return arr2[1];

    }

  }

  return false;

}

删除cookie:

function removecookie(name){

  setcookie(name,"","-1")  //通过建立cookie的时间设置,将时间设置为提前一天;

}

加油。。。明天会更好!!

前端学习之本地储存与cookie的更多相关文章

  1. Web前端学习第三天(cookie 二)

    HttpOniy Cookie机制 在http层面传输cookie,当设置HttpOnly标志后,客户端脚本就无法读写该cookie.可以用此防止xss攻击获取cookie <?php setc ...

  2. HTML5中本地储存概念是什么,什么优点 ,与cookie有什么区别?

    html5中的Web Storage 包括了两种存储方式: sessionStorage  和  localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...

  3. web前端使用localstorage、sessionstorage、cookie增删获方法

    今天主要的学习内容是cookie与本地储存的知识, 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别, ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. 值得H5前端学习的60个JS插件(含DEMO演示)

    下面也可以说是H5前端学习的js插件大全.基本包含了大部分的前端最前沿的js插件和库. 布局 SuperEmbed.js- 是一个Javascript库,可检测出网页上的内嵌视频并使他们能够变成响应式 ...

  6. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  7. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  8. 【FE前端学习】第二阶段任务-基础

    技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...

  9. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

随机推荐

  1. form表单reset表格并执行搜索

    其中reset() 不需要定义 search():是你执行的搜索的函数 <html> <head> <title>sf</title></head ...

  2. SVN冲突解决:当次提交的和上次提交的出现冲突

    转载于知蚁博客,文章地址:http://www.letuknowit.com/archives/svn-conflict-resolution 看到那个*了吧,出现这个标记就说明本地副本的文件已经过期 ...

  3. C#读写XML

    1.根据xml格式的string生成xml文件并保存到本地 /// <summary> /// 保存XML到磁盘 /// </summary> /// <param na ...

  4. 2013 acm 长沙网络赛 G题 素数+枚举 Goldbach

    题目 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3856 先预处理求出两个素数的和与积,然后枚举n-prime和n/pr ...

  5. 在子线程中new Handler报错--Can't create handler inside thread that has not called Looper.prepare()

    在子线程中new一个Handler为什么会报以下错误? java.lang.RuntimeException:  Can't create handler inside thread that has ...

  6. Eclipse 配置 pyDev(转)

    转自:http://www.51testing.com/html/75/534775-859092.html 很久没有接触到Python了.以前都是在用2.7版本的,这次索性就安装3.2的了.一般的小 ...

  7. 使用spring配置quartz定时器

    quartz是石英钟的意思,所以用这个名字来做定时器的框架名称再适合不过.一年前做项目的时候有用过这个框架,当时没有整理,今天刚好新的商城系统也需要定时器.想要达到的效果是:每天的固定时间,比如凌晨3 ...

  8. Windows10

    一.快速开机设置 我的电脑配置如图,装有VS2015 2010 OFFICE等常用开发工具,在线升级后开机速度并没有明显提升. 1.保证windows font cache service服务启动,3 ...

  9. hdu 5877 (dfs+树状数组) Weak Pair

    题目:这里 题意: 给出一个n个结点的树和一个数k,每个结点都有一个权值,问有多少对点(u,v)满足u是v的祖先结点且二者的权值之积小于等于k. 从根结点开始dfs,假设搜的的点的权值是v,我们需要的 ...

  10. 金蝶K/3 Cloud 界面解析过程

    服务端 目前也就是iis服务器生成Json描述返回给不同的展现端最解析. 不同的展现端,可以有Silverlight.WPF.Html5.Winform 当然还有IOS和Android端做解析展现 对 ...