WebStorage提供本地储存数据的功能,这里的储存是针对客户端本地而言的。

具体分两种:sessionStorage和localStorage。

一、代码实现

(1)sessionStorage的简单实验

这里有两种情况,一种用session存,一种用localstorage来存。

一些概念:

  1. session在退出浏览器后就失效了,而localstorage则会保存,直到你清除缓存为止。
  2. session的生命周期,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间。
  3. session对象可以用来保存在这段时间内所要求保存的任何数据。
  4. localStorage:将数据保存在客户端本地的硬件设备(硬盘)中,即使浏览器被关闭了,改数据仍然存在,下一次打开浏览器访问网站时仍然可以继续使用。

实现效果:

QQ截图20151122154750

因为使用的是sessionStorage,生命周期只到页面关闭为止。所以一退出浏览器,记录就没了。

(2)localStorage的简单实验

要注意一个技巧:需要不停地把要输出的内容加载到result里面,再一次性输出。

实现效果:

QQ截图20151122154956

因为使用了localStorage,就算关闭了浏览器也不会马上清除数据。

(3)作为前端简易数据库使用

将Web Storage作为简易数据库,如果能解决数据检索,对列进行管理,就可以将Web Storage作为数据库来利用了。

步骤解析:

首先新建了data对象,以对象属性的方式获取了输入值,然后将对象包装成json对象,然后通过键值对的方式,(通过姓名→储存值的方法),用localStorage存在了本地文件中。

读取的时候,先通过名字找到了存起来的json对象,然后将json对象通过parse方法还原成了普通对象,再通过获取对象值得方式取出数据。

实现效果:

QQ截图20151122155058

二、总结

前端非常重要的知识点,需要灵活使用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注