一、cookie

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <input type="text" name="username" id="username" value="">

         <input type="password" name="password" id="password" value="">

         <button type="button" name="button" id="btn">删除cookie</button>

         <script type="text/javascript">

             // 1、设置、获取

             var d = new Date();

             d.setHours(d.getHours() + 1);//1小时后过期

             // path=/ 此时的/代表的是网站中所有的目录都可以访问这个cookie

             document.cookie='username=zhangsan;expires='+d.toUTCString()+";path=/";//设置cookie

             document.cookie;//获取所有的cookie

             console.log(document.cookie)

             // 2.设置、获取、删除cookie

             // setCookie('password','123456',0.5*3600*1000)//30分钟后失效

             // setCookie('username','zhangsan',0.5*3600*1000)//30分钟后失效

             var btnObj = document.getElementById('btn')

             btnObj.onclick = function(){

                 delCookie('username');

                 delCookie('password');

             }

             function setCookie(name,value,expires){

                 //计算有效期

                 var d = new Date();

                 //设置有效期

                 d.setTime(d.getTime()+expires);

                 //设置cookie

                 document.cookie = name +'='+value+';expires='+d.toUTCString();

             }

             function getCookie(name) {

                 //获取cookie

                 var cookieStr = document.cookie;

                 //根据；拆分

                 var cookieArr = cookieStr.split(';');

                 //获取对应的cookie值

                 name += '=';//获取的cookie值都是后面有=

                 var result = '';

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

                     //没一个cookie值得前面都有一个空格，将空格删除，再去查找对应的name值

                     var tmp = cookieArr[i].trim();

                     if(tmp.indexOf(name) == 0) {

                         //如果查找成功，则直接返回

                         result = tmp.slice(name.length);

                         break;

                     }

                 }

                 //返回结果

                 return result;

             }

             function delCookie(name) {

                 var d = new Date();

                 d.setTime(d.getTime()-1000);

                 document.cookie = name+'=;expires='+d.toUTCString();

             }

         </script>

     </body>

 </html>

二、sessionStorage

【

　html5新增的会话存储对象；

生命周期：关闭窗口或标签页之后将会删除这些数据

　存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
】

使用方法：

 string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。

 void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

 void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。

 void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。

 sessionStorage.setItem('username','admin') //存储数据

 sessionStorage.getItem('username')//获取

 sessionStorage.clear();//清楚所有

 sessionStorage.removeItem('username')//清楚指定

 也可以存储JSON对象【JSON.stringify(obj)和JSON.parse(stry)】

 eg:

 var obg = {

 　　name:'tom',

 　　age:22

 };

 //存储值：将对象转换为Json字符串

 sessionStorage.setItem('user',JSON.stringify(obj));

 //取值时：把获取到的Json字符串转换回对象

 var userJsonStr = sessionStorage.getItem('user');

 userObj = JSON.parse(userJsonStr);

 console.log(userObj.name);//tom

js中cookie、sessionStorage、localStorage的更多相关文章

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

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

  2. JS中Cookie、localStorage、sessionStorage三者的区别

    cookie:大小4k,一般由服务器生成,可设置失效时间,关闭浏览器后失效,与服务器通信时:每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题 localhostStorage: ...

  3. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  4. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  5. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  6. session,cookie,sessionStorage,localStorage的相关设置以及获取删除

    一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...

  7. js中cookie的使用

    js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...

  8. js中cookie操作

    js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...

  9. js 中cookie 使用

    一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...

  10. jquery.cookie.js中$.cookie() 使用方法

    定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.coo ...

随机推荐

  1. java中类与对象的概念（2013-05-04-bd 写的日志迁移

    1:类是抽象的,概念的,代表一类事物,比如人类.猫类.. 2:对象是具体的,实际的,代表一个具体的事物 3:类是对象的模板,对象是类的一个个体,实例 创建对象的两种方法: 1.先声明在创建 对象声明: ...

  2. 阿里云全国快递物流查询api接口

    口地址: https://market.aliyun.com/products/56928004/cmapi021863.html?spm=5176.730005.productlist.d_cmap ...

  3. Python9-网络编程-day30

    # 由于不同机器上的程序要通信,才产生了网络# server# client# 端口 找到的程序# 在计算机上,每一个需要网络通信的程序,都会开一个端口# 在同一时间只会有一个程序占用一个端口# 不可 ...

  4. usb hub 设备流程图

    在此处负责而来:http://blog.csdn.net/xuelin273/article/details/38646851  下面的转载于:http://blog.csdn.net/qianguo ...

  5. 蓝桥--2n皇后问题（递归）--搬运+整理+注释

    N皇后问题: #include <iostream> #include <cmath> using namespace std; int N; ];//用来存放算好的皇后位置. ...

  6. 《小团团团队》【Alpha】Scrum Meeting 3

    项目 内容 课程名 软件工程 作业链接地址 Github地址 团队名称 小团团团队 具体目标 1.掌握软件测试基础技术:2.学习迭代式增量软件开发过程(Scrum) 1.1前言 第三天 时间: 201 ...

  7. 转：Generating PDFs from Web Pages on the Fly with jsPDF

    The Portable Document Format has been one the major innovations in the fields of desktop publishing ...

  8. Selenium WebDriver-通过键盘事件操作浏览器

    #encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...

  9. Leetcode 416.分割等和子集

    分割等和子集 给定一个只包含正整数的非空数组.是否可以将这个数组分割成两个子集,使得两个子集的元素和相等. 注意: 每个数组中的元素不会超过 100 数组的大小不会超过 200 示例 1: 输入: [ ...

  10. TensorFlow学习笔记（6）：TensorBoard之Embeddings

    本文基于TensorFlow官网的How-Tos写成. TensorBoard是TensorFlow自带的一个可视化工具,Embeddings是其中的一个功能,用于在二维或三维空间对高维数据进行探索. ...