cookie

  首先让我们先了解一下,什么是cookie,cookie是浏览器提供的一种机制,他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制,但cookie并不是JavaScript本身的属性,cookie是储存于用户硬盘的一个文件(测试的时候在FF测试,其他浏览器不支持直接输出cookie)

  1. cookie的作用

    1. 由于http协议本身是一个无状态的通信协议,所以我们需要把一些信息通过cookie一起进行传递,保证服务器能识别,可以理解为cookie是用来增强http协议的部分不足之处
    2. 由于cookie是存储于用户的硬盘上的,所以可以作为一个全局变量来使用,这是它最大的一个优点,可以根据这个特性来操作如:保存用户登录状态,跟踪用户行为,创建购物车等
  2. 使用cookie需要注意的是

    1. cookie具有不可跨域性,不同域名下的cookie是不可以相互获取的
    2. cookie有大小的限制,大概为4kb,也就是4096字节
    3. cookie需要设定过期时间,如果不设定的情况下默认关闭浏览器后清除
    4. 浏览器本身会限制每个站点的cookie的数量,大概为20个cookie
    5. cookie不建议放置太多内容,因为每次都会随着请求头一起发送,会影响性能,同时cookie在电脑上是可查看的,所以重要的信息不建议放置在cookie上
  3. 接下来是重点了,那么我们如何获取cookie呢?在js中为我们提供了这么一种方法 doucmnet.cookie,返回的是一个字符串,我们来举个例子

    <script>
    document.cookie="userName=user"
    document.cookie="userName=xiaoming"
    console.log(document.cookie)//userName=xiaoming; suerNmae=xiaoming
    </script>

    这就是创建了一个cookie,userName代表cookie的名称,user代表cookie的值,如果cookie的名称不存在那么代表重新创建cookie,如果已经存在,代表为cookie重新赋值

  4. 接下来我们开始说一下如何设置和获取以及删除cookie

    1. 设置cookie,直接上代码

      <script>
      function setCookie(name,value,expDays){ //name 名字 value 值 expDays 过期时间
      //首先设置expDays为当前时间
      var expDate=new Date;
      //使用setDate的方法为当前时间加上expDays设置cookie的失效时间
      expDate.setDate(expDate.getDate()+expDays);
      //设置cookie的内容时不能出现空格方,分号等特殊字符,使用escape对内容进行编码
      //通过toUTCString方法把日期转换为字符串传入
      document.cookie=name+'='+escape(value)+';expires'+expDate.toUTCString();
      }
      </script>
    2. 获取cookie,直接上代码

      <script>
      function getCookie(name){
      //设置初始位置,检查cookie中有没有这个name
      var start=document.cookie.indexOf(name+"="); if(start !=-1){
      //如果有的话把strat的位置变为由'='开始的位置
      start=start+name.length+1;
      //设置cookie截取到的终点位置,到下一个";"为止
      var end=document.cookie.indexOf(";",start);
      //这里是为了判断如果这个name是cookie的最后一个值的话那么它的value是没有";"的,直接到 cookie的结尾位置即可
      if(end==-1) end=document.cookie.length;
      //将cookie的value的值解码返回
      return unescape(document.cookie.substring(start,end))
      }
      //如果该cookie不存在的话直接返回空的字符串
      return ""
      }
      </script>
    3. 删除cookie,这里需要说一下,cookie的删除是由浏览器执行的,在浏览器发现cookie的有效日期已经过期的话会对该条cookie进行删除操作,下面开始代码

      <script>
      //直接回调setCookie的方法,然后将cookie的有效时间向前一天
      function removeCookie(name){
      setCookie(name,"",-1)
      }
      </script>

localStorage,sessionStorage

那么我接下说一下关于localStorage(本地存储)和sessionStorage(会话存储)这两个都是在HTML5中新增加的属性,它们将浏览器的本地存储的大小扩大到了5M,而且从IE8以上的浏览器都开始支持,localStorage指的是将数据存储在浏览器本地,如果不进行清除那么数据会一直存在,sessionStorage表示的是会话存储,如果浏览器关闭那么数据将会被清除,注意传入的必须是字符串格式的,如果想要写入的时候更复杂JSON.parse(localStorage.getItem("a")),那么相应的导出的时候使用localStorage.setItem("a", JSON.stringify(obj))

在HTML5中,本地存储是一个window的方法,所以检测的代码如下:

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

这两者的方法,由于用法比较简单,所以直接上代码

<script>
window.localStorage.name="xiaoming";//设置name
window.localStorage["name"]="xiaobai";//设置name,注意需要是字符串格式的
localStorage.setItem("name","xiaohong");//设置name
console.log(localStorage.name);//最后设置的值覆盖了之前设置的值
console.log(localStorage["name"]);//也是获取localStorage的值,不过记的要传入的是字符串
// localStorage.removeItem("name");//删除指定的localStorage的属性值
localStorage.clear();//清除所有localStarge的属性和值
console.log(localStorage.getItem("name"));//获取特定的localStorage的值,返回的是null
console.log(window.localStorage.name);//undefined
//推荐使用的方法,setItem,getItem,removeItem,clear
</script>

在H5中提供了一个key()方法,用来在不知道键和值得情况下获取所有的键和值,使用方法如下:

<script>
var stroage=window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键,再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}
</script>

在H5中新增加了onstorage事件,当本地存储发生改变时,会触发该事件

StorageEvent对象的属性:

  • key:表示项目的key发生了变化;该属性返回其初始化的值,创建对象后,该值被初始化为null。
  • oldValue:表示变更前的值
  • newValue:变更后的值
  • url:事件触发源的URL
  • source:事件触发源的URL
  • storageArea:受到影响的storage对象

来一段代码

<script>
window.onstorage = function (event) {
var key = event.key // 被修改的键名
var oldValue = event.oldValue // 旧的值
var newValue = event.newValue // 新的值
var url = event.url // 触发改变的网页的url
var storage = event.storageArea // 当前localStorage的引用(当sessionStorage改变时,这里就是当前sessionStorage的引用,好吧扯远了,看不懂可以先无视)
}
</script>
if (!window.localStorage) {
Object.defineProperty(window, "localStorage", new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, "getItem", {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "key", {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "setItem", {
value: function (sKey, sValue) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "length", {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "removeItem", {
value: function (sKey) {
if(!sKey) { return; }
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
},
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, "clear", {
value: function () {
if(!aKeys.length) { return; }
for (var sKey in aKeys) {
document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
else { aKeys.splice(iThisIndx, 1); }
delete oStorage[sKey];
}
for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
aCouple = aCouples[nIdx].split(/\s*=\s*/);
if (aCouple.length > 1) {
oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}

转载:https://www.jianshu.com/p/2549f5e7629b

JavaScript / 本地存储的更多相关文章

  1. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  2. JavaScript本地存储实践(html5的localStorage和ie的userData)

    http://www.css88.com/archives/3717 JavaScript本地存储实践(html5的localStorage和ie的userData) 发表于 2011年06月11日  ...

  3. (转)Javascript本地存储小结

    转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 以下是原文: 1. 各种存储方案的简单对比 Cookies:浏览器均支持,容量为4KB UserData:仅 ...

  4. 15个JavaScript本地存储技术的函数库和工具

    当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...

  5. 性能:15个JavaScript本地存储技术的函数库和工具

    当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...

  6. JS操作cookie以及本地存储(sessionStorage 和 localStorage )

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

  7. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

  8. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  9. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

随机推荐

  1. ASP.NET Core学习系列

    .NET Core ASP.NET Core ASP.NET Core学习之一 入门简介 ASP.NET Core学习之二 菜鸟踩坑 ASP.NET Core学习之三 NLog日志 ASP.NET C ...

  2. node.js+mongodb 爬虫

    demo截图: 本demo爬瓜子二手车北京区的数据 (注:需要略懂 node.js / mongodb 不懂也没关系 因为我也不懂啊~~~) 之所以选择爬瓜子二手车网站有两点: 一.网站无需登录,少做 ...

  3. HTTP协议详解(二)

    接着第一篇学习.... 5 头域(首部) 每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表 ...

  4. 图文详解之ZSH美化你的终端CLI

    在这个博客中,我将介绍安装ITerm2,ZSH shell,“我的ZSH”,主题,ITerm2配色方案,“我的ZSH”插件,并启用“连线”支持,以帮助创建一个美丽而强大的终端. 如果你想让你的常规Ba ...

  5. SpringJUnit4ClassRunner (单元测试)

    1.在Maven的pom.xml中加入 <dependency> <groupId>junit</groupId> <artifactId>junit& ...

  6. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  7. 微信H5支付开发(maven仓库版)

    官方文档:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1 开发之前确认开通了H5支付功能 一.安装微信sdk 二.创建config ...

  8. python3+Robot Framework+PyCharm环境部署及执行脚本

    Robot Framework是一个非常优秀的开源关键字驱动自动化测试框架,目前已经支持python2和python3,但是GUI界面RIDE只支持python2,但是python的未来是python ...

  9. SQL Server 创建索引

    索引的简介: 索引分为聚集索引和非聚集索引,数据库中的索引类似于一本书的目录,在一本书中通过目录可以快速找到你想要的信息,而不需要读完全书. 索引主要目的是提高了SQL Server系统的性能,加快数 ...

  10. PHP实现多维数组按指定值排序

    主要用到的PHP函数 array_multisort() .先实现指定多维数组一个字段排序 根据二维数组的id值来排序,转换后的数组格式如下: function arraySortByOneField ...