永久性的本地存储:localS...LOGIN

永久性的本地存储:localStorage

在最新的JS的API中增加了localStorage对象,以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器,而且存储数据的大小机会不用考虑,因为在HTML5的标准中要求浏览器至少要支持到4MB.所以,这完全是颠覆了Cookie的限制,为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。接下来就将介绍localStorage的常用的方法。

localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。

  • setItem(key,value)添加本地存储数据。两个参数,非常简单就不说了。

  • getItem(key)通过key获取相应的Value。

  • removeItem(key)通过key删除本地数据。

  • clear()清空数据。

<script type="text/javascript">
        //添加key-value 数据到 sessionStorage
        sessionStorage.setItem("demokey", "http://blog.itjeek.com");
        //通过key来获取value
        var dt = sessionStorage.getItem("demokey");
        alert(dt);
        //清空所有的key-value数据。
        //sessionStorage.clear();
        alert(sessionStorage.length);
    </script>

对于JS的学习和调试必须得有Chrome的调试工具辅助才能事半功倍。当然Chrome也是我最喜爱的Web开发辅助工具,非常简单F12快捷键就立即打开工具了,包括IE也是这个快捷键。通过下图就可以查看当前浏览器中的sessionStorage数据。

QQ截图20161014092902.png

下一节
<!DOCTYPE html> <html> <head>  <meta charset="utf-8">  <title>php中文网</title>  </head> <body> <script type="text/javascript"> //添加key-value 数据到 sessionStorage sessionStorage.setItem("demokey", "http://blog.itjeek.com"); //通过key来获取value var dt = sessionStorage.getItem("demokey"); alert(dt); //清空所有的key-value数据。 //sessionStorage.clear(); alert(sessionStorage.length); </script> </body> </html>
提交重置代码
章节课件