cookie和localStorage

一、cookie

首先，我们随意获取一个元素（用js的方式）：

var btn = document.getElementsByTagName('input')[0];

再者：判断条件，以确定存储了数据

if(getCookie("count")){

//把存储的值展示到元素的value值之上。

btn.value = getCookie("count");

}

其次，给我们获取的元素绑定click事件，用来观察效果

btn.onclick = function () {

//假设对这个元素的value值进行操作，点击一下，value值就加1.

this.value++;

//新创建一个date对象，用来获取系统时间

var date = new Date();

//定义过期时间，为当前时间+过期的时间段，这里+3，表示三天后过期

date.setDate(date.getDate()+3);

//存储元素的value值和过期时间，注意：时间要使用方法.toUTCString();才可以正常显示。

document.cookie = "count="+this.value+";expires="+date.toUTCString();

//值得一说的是：我们读取本地存储的数据也是用document.cookie;  打印出来就是：console.log(document.cookie);

}

---

// cookie 必须依赖于服务器环境！！！

var date = new Date();

// +3表示三天后过期

date.setDate(date.getDate()+3);

// document.cookie  = "键=值;expires=过期时间"+date.toUTCString();

document.cookie = "name=lisi;expires="+date.toUTCString();

document.cookie = "age=18;expires="+date.toUTCString();

// 读取：document.cookie;

console.log(document.cookie);

console.log(getCookie("age"));

---

//这里是自己写的函数，用来帮我们准确找到某一个键值

function getCookie(key){

var arr = document.cookie.split("; ");

for(index in arr){

var resArr = arr[index].split("=");

console.log(resArr);

if(resArr[0]== key){

return resArr[1];

}

}

}

//自己写的函数，用来传数据

function setCookie(key,val,tt){

var date = new Date();

date.setDate(date.getDate()+tt);

document.cookie = "key=val;expires="+date.toUTCString();

}

---

二、localstorage

这里要说明一下：localstorage比cookie写起来更加方便，且存储的数据没有过期时间，也就是永久有效。以例子来证明：

还是借用上面获取到的元素为例-------

//执行了下面的事件，然后我们来判断:

//第一层判断是否支持本地存储

//第二层用来判断是否获取到了数据,条件成立，再把存储的数据展示到元素的value值上。

if(localStorage){

if(localStorage.count){

btn.value = localStorage.count;

}

}

//元素绑定事件

btn.onclick = function () {

this.value++;

//将当前的value值赋值给localStorage.count(localStorage.count后面的.count是自己定义的任意的变量，用来存储数据)

localStorage.count = this.value;

}

附加：

//移除存储的.count值。

localStorage.removeItem("count");

---

关于cookie和localStorage的小练习(仅仅是js部分的代码)

var p = document.getElementsByTagName('p')[0];

var body= document.getElementsByTagName("body")[0];

var ch = document.getElementsByTagName("select")[0];

var ch1 = document.getElementsByTagName("select")[1];

function load(){

if(getCookie("tops")){

p.scrollTop = getCookie("tops");

}

if(localStorage){

if(localStorage.wid){

console.log(localStorage.wid);

p.style.width = localStorage.wid;

ch.value = localStorage.wid;

}

if(localStorage.back){

console.log(localStorage.back);

p.style.background = localStorage.back;

ch1.value = localStorage.back;

}

}

p.onmousewheel = function(){

var top = p.scrollTop;

var date = new Date();

date.setDate(date.getDate()+3);

document.cookie = "tops="+top+";expires="+date.toUTCString();

console.log(document.cookie);

load();

}

ch.onchange = function(){

localStorage.wid  = this.value;

load();

}

ch1.onchange = function(){

localStorage.back  = this.value;

load();

}

function getCookie(key){

var arr = document.cookie.split("; ");

for(index in arr){

var resArr = arr[index].split("=");

if(resArr[0]== key){

return resArr[1];

}

}

}

}

load();