详解H5本地储存Web Storage

2019-01-28 21:23:47王旭

2.sessionStorage在会话期内有效,数据在浏览器关闭后自动删除;

特点:会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。

兼容性

注意:IE9 localStorage不支持本地文件,需要将项目署到服务器,才可以支持!

目前所有主流的浏览器都在一定程度上支持 HTML5 的 Web Storage特性。 由上图可以看出,基本上所有现代浏览器都已经支持 Web Storage。

Android平台和 IOS 平台各自的浏览器都基本上支持 Web Storage 本地存储特性。 目前市场上的移动设备, 除了 android 手机和 iphone 手机外,越来越多的平板电脑面世,而且基本上依赖着两种平台。在移动端使用 Web Storage 我们几乎不需要考虑浏览器是否支持, 当然从代码的严谨来说,建议最好在使用前先检查浏览器是否支持

下面是检测方式:

if (window.localStorage) { // 浏览器支持 localStorage }else{ // 不支持 } if (window.sessionStorage) { // 浏览器支持 sessionStorage }else{ // 不支持 }

三、localStorage  

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 html5 的本地存储,并针对如遍历等常见问题作一些示例说明。 localStorage 是 Html5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串。不同浏览器对该 API 支持情况有所差异,如使用方法、最大存储空间等。 

存储方式:以键值对(Key-Value)的方式存储字符串。

主要应用:购物车、客户登录、游戏存档。。。

可储存的数据类型:数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)

储存地址:C:Users15014AppDataLocalGoogleChromeUser DataDefaultLocal Storage(不同电脑不一样,需要打开隐藏文件显示,但是在C盘搜索localStorage就能搜出这个文件夹。)

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

(1)localStorage.setItem(键名,键值)在本地客户端存储一个字符串类型的数据,其中,第一个参数“键名”代表了该数据的标识符,而第二个参数“键值”为该数据本身。如:

localStorage.setItem("name", "张三"); //存储键名为name和键值为"张三"的数据到本地 localStorage.setItem("age", "28"); //存储键名为age和键值为"28"的数据到本地