应用场景:
当我们用JSON来模拟后台数据的时候,前台增删改查都是把数据放到一个JavaScript对象中,但是这种方法的数据只能作用于一个页面。localstorage的出现解决了我们这个问题!即通过localstorage把数据存储在浏览器上,然后在另一个要引用此数据的页面中再取出localstorage的东西!
比如:当你首次访问某个页面,在该页面中展开主菜单的子菜单,刷新页面,子菜单已经自动展开(因为该状态已经被记录到浏览器中了),或者说关闭浏览器重新打开该页面,子菜单依旧是展开的。
代码:
现在有一个JSON文件,点击“获取数据”按钮,JSON文件的内容读取到页面上。再点击按钮,内容清空。
json文件

html代码

当点击按钮时,json文件的内容在id为jsonTip的div中展示,用data-rel来标记状态。
js代码


点击按钮

刷新页面后
