原生js学习笔记7——本地存储之cookie操作

　　什么是cookie

　　• 用来保存页面信息的，如用户名、密码

　　• cookie的特性：同一个网站中所有的页面共享一套cookie；数量、大小限制；过期时间

　　• js中使用cookie：document.cookie

　　如何设置cookie？

　　在js中，使用document.cookie = "键=值"即可，但是这种方式设置的cookie由于没有添加过期时间，所以关闭浏览器，cookie就丢失，我们要在后边继续加上expires=时间设置上过期时间即可.

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

// 获取系统当前时间

var oDate = new Date();

// 设置距离当前时间多少天后cookit过期

oDate.setDate(oDate.getDate() + 30);

// 设置cookie及过期时间

document.cookie = "userName=hello;expires=" + oDate;

document.cookie = "password=123456;expires=" + oDate;

alert(document.cookie);

</script></head><body>

</body></html>

　　效果图：

cookie

　　如何从cookie中取值

　　示例：将用户名密码写入

<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

div {

width: 500px;

height: 500px;

margin: 0 auto;

}

#userName {

display: block;

width: 200px;

height: 30px;

margin: 0 auto;

}

#password {

display: block;

width: 200px;

height: 30px;

margin: 0 auto;

}

#save {

display: block;

width: 100px;

height: 20px;

margin: 0 auto;

}

#cokie {

display: block;

width: 100px;

height: 20px;

margin: 0 auto;

}

</style>

<script type="text/javascript">

window.onload = function  () {

var oBtn = document.getElementById('save');

var oBtn1 = document.getElementById('cokie');

var name ;

var pass ;

oBtn.onclick = function  () {

name = document.getElementById('userName').value;

pass = document.getElementById('password').value;

var oDate = new Date();

oDate.setDate(oDate.getDate() + 30);

// 写入cookie

document.cookie = "userName=" + name + "; expires=" + oDate;

document.cookie = "password=" + pass + "; expires=" + oDate;

}

oBtn1.onclick = function  () {

var oCookie = document.cookie.split('; ');

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

var temp = oCookie[i].split('=');

if (i == 1) {

document.getElementById('userName').value = temp[1];

};

if (i == 0) {

document.getElementById('password').value = temp[1];

};

};

}

}

</script></head><body>

<div>

<input type = "text" id = "userName" placeholder = "用户名"> <br>

<input type="text" id = "password" placeholder = "密码"> <br>

<input type="button" value = "保存" id = "save">

<input type="button" value = "从cookie读取" id = "cokie">

</div>

</body></html>

原生JS---7的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  3. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  4. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  7. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

  8. 原生js封装ajax：传json，str，excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  9. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  10. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. codeforces_738C_二分

    C. Road to Cinema time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. Linux如何查看端口（转）

    Linux如何查看端口 1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 # lsof -i:8000 COMMAND PID USER ...

  3. php第十七节课

    分页查询 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. vmware 15安装破解及使用教程

    VMware Workstation Pro15虚拟机破解版(序列号+安装教程) VMware15已经推出,根据版本号名为VMware Workstation Pro 15是一款强大好用的桌面虚拟机软 ...

  5. 转：Windows Phone 7 设计简介

    英文原文:smashingmagazine 导读:Windows Phone 7 引进了一个全新的内容管理和用户界面,命名为Metro的设计语言和理论.微软这次所看准的市场和用户群也与之前的老一代 W ...

  6. git 的简单使用(3)

    Git鼓励大量使用分支: 查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name> 创建+切换分支:git ...

  7. PAT 1091. Acute Stroke (bfs)

    One important factor to identify acute stroke (急性脑卒中) is the volume of the stroke core. Given the re ...

  8. 从NLP任务中文本向量的降维问题，引出LSH（Locality Sensitive Hash 局部敏感哈希）算法及其思想的讨论

    1. 引言 - 近似近邻搜索被提出所在的时代背景和挑战 0x1:从NN(Neighbor Search)说起 ANN的前身技术是NN(Neighbor Search),简单地说,最近邻检索就是根据数据 ...

  9. JavaSE 学习笔记之String字符串（十四）

    API:(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力,而又无需访问源 ...

  10. Python 6 数字和布尔值及字符串的基本功能

    数据类型:查看变量数据类型type(变量)  或者  print(type(变量)) 整数int:就是不带小数的自然数字,也叫整型.在2.X版本中还分为长整型和整形.但是在3.X版本中统一称为整数或整 ...