if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
读取之后要将 JSON 字符串转换成为 JSON 对象,使用 JSON.parse() 方法:
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
2524返回文档完整的URLdocument.write()
Javascript 中只能在 HTML 输出流中使用 document.write,在文档已加载后使用它(比如在函数中),会覆盖整个文档。
HTML 输出流:当前数据形式是 HTML 格式的数据,这部分数据正被导出、传输或显示,所以称为”流“。
思考: 什么是在 html 输出中使用,什么是文档加载后使用?
尝试一下 »
例子中代码执行到 document.write 就向页面写入,文档加载完成,但未调用函数,所以不会执行函数中的 document.write,当点击按钮,触发了事件,则是在文档加载完成后使用的 document.write,则会覆盖页面中原有信息。
用 javascript 编写的代码只能通过 html/xhtml 文档才能执行,代码一行一行解析,文档在加载的过程中实际是一边加载一边用 document.write 写出内容到屏幕上,而加载完成后,document 就关闭。如果再调用 document.write 往网页上写内容的话,就会重写 document。
2523方法来替代 scrollBy()
测试比较 scroll()、scrollTo()、scrollBy() 三个方法的区别:
测试效果如下:
另:元素还有一个设置或读取滚动条位置的属性:element.scrollTop,这是一个读写属性,如 element.scrollTop = 50; 便是设置元素的滚动条位置为 50px;
2522把键盘焦点给予一个窗口 getSelection() 返回一个 Selection 对象 表示用户选择的文本范围或光标的当前位置 getComputedStyle()
Window getComputedStyle() 方法和 style 的异同
getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。
而不同点就是:
element.style
读取的只是元素的内联样式,即写在元素的 style 属性上的样式;而getComputedStyle
读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式。element.style
既支持读也支持写,我们通过element.style
即可改写元素的样式。而getComputedStyle
仅支持读并不支持写入。我们可以通过使用getComputedStyle
读取样式,通过element.style
修改样式我们可以通过使用 getComputedStyle 读取样式,通过 element.style 修改样式。
更多内容可以参考:window.getComputedStyle() 方法的使用。
2521返回相对于屏幕窗口的y坐标 self
window、self、window.self 是等价的:
2520返回窗口的文档显示区的宽度 localStorage
localStorage 的优势
localStorage 的局限
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。
localStorage 使用
首先在使用 localStorage 的时候,我们需要判断浏览器是否支持 localStorage 这个属性:
localStorage 的写入有三种方法:
运行后的结果如下:
这里要特别说明一下 localStorage 的使用也是遵循同源策略的,所以不同的网站直接是不能共用相同的 localStorage。
最后在控制台上面打印出来的结果是:
不知道各位读者有没有注意到,刚刚存储进去的是 int 类型,但是打印出来却是 string 类型,这个与 localStorage 本身的特点有关,localStorage 只支持 string 类型的存储。
localStorage 的读取
这里面是三种对 localStorage 的读取,其中官方推荐的是 getItem\setItem 这两种方法对其进行存取,不要问我这个为什么,因为这个我也不知道。
我之前说过localStorage就是相当于一个前端的数据库的东西,数据库主要是增删查改这四个步骤,这里的读取和写入就相当于增、查的这两个步骤。
下面我们就来说一说 localStorage 的删、改这两个步骤。
改这个步骤比较好理解,思路跟重新更改全局变量的值一样,这里我们就以一个为例来简单的说明一下:
这个在控制台上面我们就可以看到已经 a 键已经被更改为 4 了。
localStorage 的删除
1、将localStorage的所有内容清除
2、 将 localStorage 中的某个键值对删除
控制台查看结果:
localStorage 键的获取
使用 key() 方法,向其中出入索引即可获取对应的键。
localStorage 其他注意事项
一般我们会将 JSON 存入 localStorage 中,但是在 localStorage 会自动将 localStorage 转换成为字符串形式。
这个时候我们可以使用 JSON.stringify() 这个方法,来将 JSON 转换成为 JSON 字符串。
实例:
读取之后要将 JSON 字符串转换成为 JSON 对象,使用 JSON.parse() 方法:
打印出来是 Object 对象。
另外还有一点要注意的是,其他类型读取出来也要进行转换。