JavaScript / 本地存储
cookie
首先让我们先了解一下，什么是cookie，cookie是浏览器提供的一种机制，他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制，但cookie并不是JavaScript本身的属性，cookie是储存于用户硬盘的一个文件（测试的时候在FF测试，其他浏览器不支持直接输出cookie）
-
cookie的作用
- 由于http协议本身是一个无状态的通信协议，所以我们需要把一些信息通过cookie一起进行传递，保证服务器能识别，可以理解为cookie是用来增强http协议的部分不足之处
- 由于cookie是存储于用户的硬盘上的，所以可以作为一个全局变量来使用，这是它最大的一个优点，可以根据这个特性来操作如：保存用户登录状态，跟踪用户行为，创建购物车等
-
使用cookie需要注意的是
- cookie具有不可跨域性，不同域名下的cookie是不可以相互获取的
- cookie有大小的限制，大概为4kb，也就是4096字节
- cookie需要设定过期时间，如果不设定的情况下默认关闭浏览器后清除
- 浏览器本身会限制每个站点的cookie的数量，大概为20个cookie
- cookie不建议放置太多内容，因为每次都会随着请求头一起发送，会影响性能，同时cookie在电脑上是可查看的，所以重要的信息不建议放置在cookie上
-
接下来是重点了，那么我们如何获取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重新赋值
-
接下来我们开始说一下如何设置和获取以及删除cookie
-
设置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> -
获取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> -
删除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
