javascript的本地存储 cookieslocalStorage

Posted 白凌玄月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript的本地存储 cookieslocalStorage相关的知识,希望对你有一定的参考价值。

一、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中,而在localStoragesessionStorage里面。

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

 

以上是关于javascript的本地存储 cookieslocalStorage的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 本地存储

Javascript 显示来自本地存储阵列的数据问题

如何在本地存储 javascript 函数所做的 css 更改?

如何使用本地存储使用javascript登录

JavaScript JavaScript本地存储

JavaScript本地存储详解