一、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. SEO 优化

    1.什么是SEO优化: 简单的来说就是了解搜索引擎的排名规则,投机所好,让我们的网站在搜索引擎上得到靠前的排名,获取更多流量的一种方式. 2.SEO优化-衡量标准 关键词的排名--核心关键词的效果 收 ...

  2. paper:synthesizable finite state machine design techniques using the new systemverilog 3.0 enhancements 之 standard verilog FSM conding styles(二段式)

    1.Two always block style with combinational outputs(Good Style) 对应的代码如下: 2段式总结: (1)the combinational ...

  3. 采用Atlas+Keepalived实现MySQL读写分离、读负载均衡

    ========================================================================================== 一.基础介绍 == ...

  4. PAT Basic 1080

    1080 MOOC期终成绩 对于在中国大学MOOC(http://www.icourse163.org/ )学习“数据结构”课程的学生,想要获得一张合格证书,必须首先获得不少于200分的在线编程作业分 ...

  5. 在终端更改MAC的MySQL的root密码

  6. BZOJ 2721: [Violet 5]樱花

    (X-N)(Y-N)=N^2 #include<cstdio> using namespace std; const int mod=1e9+7; int n,cnt,isprime[10 ...

  7. UVa 11149 Power of Matrix 矩阵快速幂

    题意: 给出一个\(n \times n\)的矩阵\(A\),求\(A+A^2+A^3+ \cdots + A^k\). 分析: 这题是有\(k=0\)的情况,我们一开始先特判一下,直接输出单位矩阵\ ...

  8. Solr 7 部署与使用踩坑全记录

    前言 Solr 是一种可供企业使用的.基于 Lucene 的搜索服务器,它支持层面搜索.命中醒目显示和多种输出格式.在这篇文章中,我将介绍 Solr 的部署和使用的基本操作,希望能让初次使用的朋友们少 ...

  9. fedora安装rails缺少js runtime和cannot load such file -- sqlite3/sqlite3_native解决办法

    装完rails后创建应用程序: rails new demo 进入创建的demo文件夹 cd demo 检查安装环境 rake about 这时出现错误 Could not find a JavaSc ...

  10. [linux小技巧]批量移动文件

    for i in {1..23};do mv test$i/ ../;done