javascript的本地存储 cookieslocalStorage

Posted 2020-07-26 白凌玄月

一、cookies 本地存储

首先是常用的cookies方法，网上有很多相关的代码以及w3cSchool cookies。

 1 // 存储cookies
 2 function setCookie(name,value,expiredays) 
 3 { 
 4     var argv = setCookie.arguments; 
 5     var argc = setCookie.arguments.length; 
 6     var LargeExpDate = new Date (); 
 7     var expires = (argc > 2) ? argv[2] : expiredays ; 
 8     if(expires!=null) 
 9     { 
10         LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));         
11     } 
12     document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString())); 
13 }
14 
15 // 获取cookies
16 function getCookie(Name) 
17 { 
18     var search = Name + "=" 
19     if(document.cookie.length > 0) 
20     { 
21         offset = document.cookie.indexOf(search) 
22         if(offset != -1) 
23         { 
24             offset += search.length 
25             end = document.cookie.indexOf(";", offset) 
26             if(end == -1) end = document.cookie.length 
27             return unescape(document.cookie.substring(offset, end)) 
28         } 
29         else return "" 
30     } 
31 } 
32 
33 // 删除cookies
34 function deleteCookie(name) 
35 { 
36     var expdate = new Date(); 
37     expdate.setTime(expdate.getTime() - (86400 * 1000 * 1)); 
38     setCookie(name, "", expdate); 
39 } 

使用的时候直接调用就行。

// 存储
setCookie(‘名称‘,值,过期时间);
//过期时间可以不写
// 获取
getCookie(‘名称‘)
//删除
deleteCookie(‘名称‘);

查找子健

考虑当需要存储多个值在一条cookies时，可以把多个值按子健存入。

 

setCookie(‘openif2‘,"k1=1&k2=2&k3=3");
// 这时获取cookies时，可以单独获取每一个子健
var child = getCookie(‘openif2‘)
var childs = child.split(‘&‘);
for (var i = 0;i<childs.length;i++) {
    console.log(childs[i])
}

 

附（注意8小时时差）：

本地日期：toString()

本地日期：toLocaleString()

GMT世界时间：toGMTString()

UTC世界时间：toUTCString()

 

---

 

二、html5 本地存储

H5 web存储

支持性检测：

if （window.localStorage）{
    // 支持本地存储
}

localStorage

localStorage为永久性保存数据，不会随着浏览器的关闭而消失。

按域名进行存储，不会和其他域名冲突

键值对存储：key/value

 

localStorage API

1.setItem(key , value)，保存或设置数据。如果key已经存在，则覆盖key对应的value，如果不存在则添加key与value。

2.key(index); 获取指定下标位置的key

3.length 获取localStorage一共有多少条数据

　　　　　配合key(index)方法可以实现遍历localStorage数据的方法

4.clear(); 将同域名下的所有localStorage数据都清空

5.storage事件：当同源的localStorage或sessionStorage有更改以后，会触发这个事件。

6.removeItem():删除数据，通过key来删除相应的value

sessionStorage

sessionStorage为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样。

sessionStorage不能跨页面访问，也不会触发跨标签页的storage事件。它只局限在当前的标签页里。

 

注：使用H5方法添加的本地缓存不在cookies中，而在localStorage或sessionStorage里面。

---

 

以上是个人总结的一些关于本地存储的信息，希望能给需要的同学一些帮助。有问题或者有更好的建议，欢迎前来讨论！