window对象，浏览器缓存，浏览器控制台Console 对象

最新推荐文章于 2024-04-25 19:46:51 发布

罗会

最新推荐文章于 2024-04-25 19:46:51 发布

阅读量1.2k

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/qq_42238554/article/details/88016767

版权

原生js 专栏收录该内容

79 篇文章 14 订阅

订阅专栏

Window 对象

History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

属性：
length
返回历史列表中的网址数
实例：

console.log(window.history.length);//1

Navigator 对象

Navigator 对象包含有关浏览器的信息。

Navigator 对象属性

appCodeName

返回浏览器的代码名，appCodeName 属性是一个只读字符串，声明了浏览器的代码名。
实例：

document.write("浏览器代号: " + navigator.appCodeName);

appName

返回浏览器的名称,appName 属性可返回浏览器的名称。
实例：

document.write("浏览器名称: " + navigator.appName);

appVersion

返回浏览器的平台和版本信息，appVersion 属性可返回浏览器的平台和版本信息。该属性是一个只读的字符串。
实例：

document.write("版本信息: " + navigator.appVersion);

cookieEnabled

返回指明浏览器中是否启用 cookie 的布尔值
cookieEnabled 属性可返回一个布尔值，如果浏览器启用了 cookie，该属性值为 true。如果禁用了 cookie，则值为 false。
实例：

document.write("是否启用 Cookie: " + navigator.cookieEnabled);

platform

返回运行浏览器的操作系统平台
platform 属性是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台。
实例：

document.write("硬件平台: " + navigator.platform);

userAgent

返回由客户机发送服务器的user-agent 头部的值
userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。
实例：

document.write("用户代理: " + navigator.userAgent);

Navigator 对象方法

javaEnabled()

指定是否在浏览器中启用Java
javaEnabled() 方法可返回一个布尔值，该值指示浏览器是否支持并启用了 Java。如果是，则返回 true，否则返回 false。
实例：

document.write("启用Java: " + navigator.javaEnabled());

方法：
back()
加载 history 列表中的前一个 URL
定义和用法
back() 方法可加载历史列表中的前一个 URL（如果存在）。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
语法
history.back()
实例：

<body>
    <div>
    <!--点击按钮回退页面到上一页-->
        <button onclick="myfun()">点击</button>
    </div>
    <script>
        function myfun() {
            window.history.back();
        }
    </script>
</body>

forward()
加载 history 列表中的下一个 URL
forward() 方法可加载历史列表中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
语法
history.forward()
实例：

<body>
    <div>
     <!--点击按钮进入页面到下一页-->
        <button onclick="myfun()">点击</button>
    </div>
    <script>
        function myfun() {
            window.history.forward();
        }
    </script>
</body>

go()
加载 history 列表中的某个具体页面
定义和用法
go() 方法可加载历史列表中的某个具体的页面。
该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。
语法:
history.go(number|URL)
实例:

<body>
    <div>
        <button onclick="myfun()">点击</button>
    </div>
    <script>
        function myfun() {
            window.history.go(-2);
        }
    </script>
</body>

localStorage属性

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
localStorage 属性是只读的。
提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

语法
window.localStorage

保存数据语法：
localStorage.setItem(“key”, “value”);

读取数据语法：
var lastname = localStorage.getItem(“key”);

删除数据语法：
localStorage.removeItem(“key”);

返回值：
一个存储对象

实例,存储一条数据到localStorage：

localStorage.setItem("myname","lisa");

结果：
在这里插入图片描述
实例2，localStorage通过key获取对应的value

var a=localStorage.getItem("myname");
console.log(a);//lisa

实例3，localStorage删除key

localStorage.removeItem("myname")

Location对象

含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
例如：

console.log(window.location);
//输出结果
//Location {replace: ƒ, assign: ƒ, href: "file:///Users/xx/Documents/gitee/%20HuiVueDemo/test/src/views/main.html", ancestorOrigins: DOMStringList, origin: "file://", …}

Location 对象属性

hash

返回一个URL的锚部分
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
实例

document.write(location.hash);

host

返回一个URL的主机名和端口
host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号。
实例：

document.write(location.host);

hostname

返回URL的主机名
hostname 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名。
实例：

document.write(location.hostname);

href

返回完整的URL
href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
实例：

document.write(location.href);

pathname

返回的URL路径名。
pathname 属性是一个可读可写的字符串，可设置或返回当前 URL 的路径部分。

document.write(location.pathname);

port

返回一个URL服务器使用的端口号
port 属性是一个可读可写的字符串，可设置或返回当前 URL 的端口部分。
注意：如果端口号就是80（这是默认的端口号)，无需指定。
实例：

document.write(location.port);

protocol

返回一个URL协议
protocol 属性是一个可读可写的字符串，可设置或返回当前 URL 的协议。
实例：

document.write(location.protocol);

search

返回一个URL的查询部分
search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。

document.write(location.search);

Location 对象方法

assign()

载入一个新的文档
assign()方法加载一个新的文档。
实例：

window.location.assign("http://www.runoob.com")

reload()

重新载入当前文档
reload()方法用于刷新当前文档。
reload() 方法类似于你浏览器上的刷新页面按钮。
如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
参数说明：
forceGet Boolean 可选。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。

location.reload();
location.reload(true);

replace()

用新的文档替换当前文档
replace() 方法可用一个新文档取代当前文档。
实例：

window.location.replace("http://www.runoob.com")

sessionStorage 属性

定义和使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，改数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

语法
window.sessionStorage

保存数据语法：
sessionStorage.setItem(“key”, “value”);

读取数据语法：
var lastname = sessionStorage.getItem(“key”);

删除指定键的数据语法：
sessionStorage.removeItem(“key”);

删除所有数据：
sessionStorage.clear();

实例1,获取本地的sessionStorage：

window.sessionStorage

实例2，保存一条session

sessionStorage.setItem("myname","lisa")

实例3，读取一条session

sessionStorage.getItem("myname");

实例4，删除一条session

sessionStorage.removeItem("myname");

实例5，删除所有session

sessionStorage.clear()

Console 对象

提供了访问浏览器调试模式的信息到控制台。

assert() 如果断言为 false，则在信息到控制台输出错误信息。
clear() 清除控制台上的信息。
count() 记录 count() 调用次数，一般用于计数。
error() 输出错误信息到控制台
group() 在控制台创建一个信息分组。一个完整的信息分组以 console.group() 开始，console.groupEnd() 结束
groupCollapsed() 在控制台创建一个信息分组。类似 console.group() ，但它默认是折叠的。
groupEnd() 设置当前信息分组结束
info() 控制台输出一条信息
log() 控制台输出一条信息
table() 以表格形式显示数据
time() 计时器，开始计时间，与 timeEnd() 联合使用，用于算出一个操作所花费的准确时间。
timeEnd() 计时结束
trace() 显示当前执行的代码在堆栈中的调用路径。
warn() 输出警告信息，信息最前面加一个黄色三角，表示警告

罗会

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window对象，浏览器缓存，浏览器控制台Console 对象

Window 对象History对象History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。属性：length 返回历史列表中的网址数实例：console.log(window.history.length);//1Navigator 对象Navigator 对...
复制链接

扫一扫