JS中的本地存储

最新推荐文章于 2024-07-18 22:15:17 发布

cssshua

最新推荐文章于 2024-07-18 22:15:17 发布

阅读量4.9k

点赞数 3

分类专栏： JavaScript 文章标签：本地存储 HTML5 JavaScript localstorage

本文链接：https://blog.csdn.net/cssshua/article/details/78002277

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在客户端运行的JS是不能操作用户电脑磁盘中的文件的（保护客户端运行的安全）

JS中的本地存储：

使用JS向浏览器的某一个位置中存储一些内容，浏览器及时关闭了，存储的信息也不会销毁，当再重新打开浏览器的时候，我们依然可以获取到上一次存储的信息

本地存储和缓存是不一样的，本地存储有本地存储的点，缓存有缓存的点。记住用户名密码，购物车等就属于本地存储

本地存储方案：

传统：

1.cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取cookie的）

2.session：吧信息存储到服务器上，不属于本地存储，属于服务器存储

HTML5：webStorage

1.localStorage：永久存储到客户端本地

2.sessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失

商品加入购物车的过程：

①先将当前用户加入购物车的这条信息存到本地cookie一份

②再存到服务器中的session中一份

③再存到服务器的数据库中一份

不仅存了当前这条购物车信息之外，还存了客户端的IP地址，如果登录了还需要记录用户账号

好处：实现多设备之间，同一个账号能够一起购买

cookie的操作

存储：document.cookie = "age=7"

获取：document.cookie

document.cookie = "age=7";
console.log(document.cookie);     //age=7

如果想要获取cookie中某个参数的值，就需要编写JS进行正则匹配

cookie.js

var cookieRender = (function(){
    //设置，expires过期时间，path路径，domain当前的一个域
    function setValue(options){
        var _default = {
            name: null,
            value: null,
            expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
            path: '/',
            domain: ''
        };
        for (var key in options) {
            if(options.hasOwnProperty(key)){
                _default[key] = options[key];
            }
        }
        document.cookie = _default.name + "=" + escape(_default.value) + 
            ";expires=" + _default.expires.toGMTString() + 
            ";path=" + _default.path + ";domain=" + _default.domain;
    }
    //获取，正则匹配
    function getValue(name){
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        }
        return null;
    }
    //删除:原理就是让过期时间变成一个今天日期之前的
    function removeValue(options){
        var _default = {
            name: null,
            path: '/',
            domain: ''
        };
        for (var key in options) {
            if(options.hasOwnProperty(key)){
                _default[key] = options[key];
            }
        }
        if (getValue(_default.name)) {
            document.cookie = _default.name + "= ; path=" + _default.path  +"; domain="
             + _default.domain + ";expires=Fri, 02-Jan-1970 00:00:00 GMT";
        }
    }

    return {
        set: setValue,
        get: getValue,
        remove: removeValue
    }
})();

使用cookie存储

<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript">
	cookieRender.set({
		name: 'age',
		value: 7
	});
	console.log(cookieRender.get("age"));   //7
</script>

escape && unescape 可以对中文的字符串进行编码和解码，防止传递存储过程中出现乱码

<script type="text/javascript">
		var str = "前端知识";
		var n = escape(str);
		console.log(n);        //%u524D%u7AEF%u77E5%u8BC6
		var m = unescape(n);
		console.log(m);        //前端知识
</script>

除此之外，还有encodeURI() && decodeURI() ， encodeURIComponent() && decodeURIComponent()

localStorage的操作

存储：localStorage.setItem([key],[value]) => 向客户端本地存储一条记录，存储的[value]需要是字符串格式的，如果编写的不是字符串，浏览器会默认转换成字符串然后再进行存储，同源下存储的[key]是不会重复的，如果之前有的话，是把存储的信息重复的进行修改

获取：localStorage.getItem([key]) => 获取之前存储的值

移除：localStorage. removeItem([key]) => 移除key存储的值

都移除：localStorage.clear() => 把当前源下所有存储记录都移除掉

条数：localStorage.length() => 获取存储的记录条数 => '1'

索引值：localStorage.key(0) => 获取索引为0的一项的key值是什么 => ‘age’

localStorage.setItem('age',7);                                  
    localStorage.getItem('age');   //   得到的是字符串类型的 ‘7’  
    localStorage.setItem('age',{zhufeng：‘珠峰’});          
    localStorage.getItem('age');    //   [Object,Object]    
    localStorage.setItem('age',  JSON.stringify({"zhufeng"："珠峰"}));          
    localStorage.getItem('age');    //   {"zhufeng"："珠峰"}

数组 toString()是转换成字符串

对象 toString()是不仅仅是转换字符串，而且是用来检测数据类型的

sessionStorage的操作

存储：sessionStorage.setItem([key],[value])

获取：sessionStorage.getItem([key])

移除：sessionStorage.removeItem([key])

都移除：sessionStorage.clear()

条数：sessionStorage.length()

索引值：sessionStorage.key(0)

localStorage和sessionStorage的区别

localStorage => 属于永久存储到本地，不管是刷新页面还是关闭浏览器，存户的内容都不会消失，只有我们自己手动删除才会消失（①在控制台resource里面找到对象摁住delete，②使用JS里面的removeItem([key]) 或者clear()方法来清除），不管是杀毒软件还是浏览器自带的清除历史记录的功能，都不能把localstorage存储的内容移除掉

sessionStorage => 属于临时会话存储，只要当前的页面不关闭，信息就可以存储下来，但是页面一旦关闭，存储的信息就会自带清除（F5刷新页面只是把当前的DOM结构等进行重新的渲染，会话并没有关闭）