HTML5新增的本地存储功能(笔记)

时间：2021-06-09 13:35:49

HTML5新增的本地存储功能分为两种，分别对应两个JS对象：①本地存储对应localStorage对象，主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内)。②会话存储对应sessionStorage对象，用于临时保存一个窗口的数据(在这个窗口关闭之前，数据是存在的，关闭窗口之后会被浏览器删除)。无论本地存储还是会话存储，都是与网站所在的域联系在一起的(也就是说，在同一个域名内，数据是可以互相访问的)。由于这些数据是保存在用户的计算机上，网页不能访问保存在其他用户计算机上的数据，类似的，如果你用不同的用户名登陆自己的计算机或者使用不用的浏览器，那么存取的也将是不同的本地存储数据。浏览器对web存储的支持是比较好的，最低版本有：IE8、chrome5、safari4、opera10.5、safari ios2以及android2

操作本地存储和会话存储：

    //保存一段信息到本地存储或会话存储中

    localStorage[keyName] = data;

    sessionStorage[keyName] = data;

    //如果要检测某个属性值是否为空，可以直接测试它是否等于null

    if (localStorage['name'] == null){alert('没有保存name这个属性')}

删除存储数据：只要调用removeItem()方法，存入要删除的属性名就可以删除不想要的数据了，也可以调用clear()方法，清空网站的存储数据(本地存储和会话存储都适用)：

//删除某个存储数据

localStorage.removeItem('user_name');

//删除所有存储数据

localStorage.clear();

查找所有数据：适用key()方法可以从本地或会话存储中取得当前网站保存的所有数据

数据类型：通过localStorage或sessionStorage对象保存起来的数据，都会自动转换为字符串。如果要调用这两个对象里面的值是数字，则需要先把字符串转换为数字才能用。如果是对象，则可以通过JSON.parse()方法转换为对象在调用。

相关文章